HTML5初识Canvas
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Canvas示例</title>
<!--[if lte IE 8]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
</head> <body>
<p>Canvas的用途：</p>
<p>动态生成和展示图形、图表、图像以及动画</p>
<p>性能非常好：不需要将所绘制的图像中的每个图元当做对象存储。API相对简单</p>
<p>canvas默认会创建一块矩形区域 默认尺寸 300 X 150(px)</p>
<p>canvas的坐标默认是0,0 也叫原点</p>
<p>canvas也可以通过css的方式增加边框、内边距、外边距等</p>
<p>现在的大部分浏览器已经支持canvas<br />
老版本的IE不支持，可以使用一个js库来做兼容：explorercanvas.js <br>
js库地址：https://github.com/arv/ExplorerCanvas
</p> <canvas id="test" style="border:1px solid;" width="200" height="200">
当浏览器不支持canvas时会显示这段文字，这里还可以使用图片代替
</canvas>
<script>
function drawTest() {
//获取canvas元素及绘图上下文对象
var canvas = document.getElementById('test');
var context = canvas.getContext('2d'); //用绝对坐标来创建一条路径
context.beginPath();
context.moveTo(70, 140);
context.lineTo(140, 70);
context.stroke();
}
window.addEventListener("load", drawTest, true);
</script>
</body> </html>
HTML5初识Canvas的更多相关文章
- [html5] 初识绘图canvas
这个星期被调到别的项目组专门做了一会儿前端,没办法,人太少,我也只能硬着头皮上... 说起来,html5的canvas真的好用,可以画色块,可以嵌入图片,可以通过定位在图片上写字等等 举例如下 在ht ...
- 用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- HTML5在canvas中绘制复杂形状附效果截图
HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...
- HTML5之Canvas时钟(网页效果--每日一更)
今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...
- HTML5 画布canvas元素
HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...
- HTML5 之Canvas绘制太阳系
<!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...
- HTML5 中canvas支持触摸屏的签名面板
1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...
- 【HTML5】Canvas画布
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- html5 之 canvas 相关知识(一)概念及定义
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
随机推荐
- Java-笔记1
/* 对第一个java程序进行总结 1. java程序编写-编译-运行的过程 编写:我们将编写的java代码保存在以".java"结尾的源文件中 编译:使用javac.exe命令编 ...
- Ubuntu 12.04 the system is running in low-graphics mode
1.出现问题如图所示: 2.解决方案: Ctrl + Alt + F1 df -h 输入密码,到了这一步,也是可以使用terminal,那么没有图形界面也是可以的 cd /etc/X11 sudo c ...
- td过长，将固定宽度table撑开
解决办法: 在table上加上样式: table{table-layout:fixed;word-break:break-all} table-layout:fixed tablle的列宽由表格宽 ...
- UISearchController（使用）
效果图1 效果图2 其实一般是在第一种情况使用的UISearchController,但是第二种情况这种又懒得去用uisearchbar+uitableview等等去处理, 其实主要是对数据源的合理使 ...
- exa命令详解
exa 是 ls 文件列表命令现代化替代品. 官网:https://the.exa.website/ GitHub:https://github.com/ogham/exa 后续整理中……
- 使用inotify-tools与rsync构建实时备份系统
使用inotifywait监控文件变动 inotifywait是 inotify-tools 包中提供的一个工具,它使用 inotify API 来监控文件/目录中的变动情况. 在archlinux上 ...
- Optimization Tipss for Multi Vendor eCommerce Software to drive, retain more sales
1. Make the Registration & Listing simple - Only if you keep the registration process and produ ...
- 牛客暑假多校第二场J-farm
一.题意 White Rabbit has a rectangular farmland of n*m. In each of the grid there is a kind of plant. T ...
- hive-pom.xml
4.0.0 <groupId>com.cenzhongman</groupId> <artifactId>hive</artifactId> <v ...
- 3195: [Jxoi2012]奇怪的道路
3195: [Jxoi2012]奇怪的道路 链接 思路: 因为一个点只会和它前后k个点连边,所以,记录下每个点的前k个点和它自己(共k+1个点)的状态,1表示奇数,0表示偶数. dp[i][j][s] ...