HTML 5 canvas

Canvas 对象

Canvas 对象表示一个 HTML 画布元素 - canvas。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

你可以直接在该对象上指定宽度和高度，但是，其大多数功能都可以通过 CanvasRenderingContext2D 对象获得。这是通过 Canvas 对象的 getContext() 方法并且把直接量字符串 “2d” 作为唯一的参数传递给它而获得的。

canvas 标记在 Safari 1.3 中引入，在制作此参考页时，它在 Firefox 1.5 和 Opera 9 中也得到了支持。在 IE 中，canvas 标记及其 API 可以使用位于 excanvas.sourceforge.net 的 ExplorerCanvas 开源项目来模拟。

Canvas 对象的属性

height 属性

画布的高度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。

width 属性

画布的宽度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。

<canvas id="myCanvas" width="200" height="100"></canvas>

Canvas 对象的方法

getContext()

返回一个用于在画布上绘图的环境。

大多数 Canvas 绘图 API 都没有定义在 canvas 元素本身上，而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

<script type="text/javascript">
var c=document.getElementById("myCanvas"); //JavaScript 使用 id 来寻找 canvas 元素
var cxt=c.getContext("2d");  //创建 context 对象
cxt.fillStyle="#FF0000";  //fillStyle 方法将其染成红色
cxt.fillRect(0,0,150,75);  //fillRect 方法规定了形状、位置和尺寸 (x, y, width, height)
</script>

Canvas API 也使用了路径的表示法。但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用 beginPath() 和 arc() 方法。

一旦定义了路径，其他的方法，如 fill()，都是对此路径操作。绘图环境的各种属性，比如 fillStyle，说明了这些操作如何使用。

注释：Canvas API 非常紧凑的一个原因上它没有对绘制文本提供任何支持。要把文本加入到一个 canvas 图形，必须要么自己绘制它再用位图图像合并它，或者在 canvas 上方使用 CSS 定位来覆盖 HTML 文本。

Canvas 实例

下面实例都要用到的canvas 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

线条

通过指定从何处开始，在何处结束，来绘制一条线：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>

圆形

通过规定尺寸、颜色和位置，来绘制一个圆：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>

渐变

使用指定的颜色来绘制渐变背景：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>

图片

把一幅图像放置到画布上：

<script type="text/javascript">
/*  
绘制图片  
	图片预加载，获取图片文件  
	onload中调用  
	drawImage(img,x,y,w,h);绘制图片(图片,坐标x,坐标y,宽度,高度)  
*/  
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
img.onload = function () {
    cxt.drawImage(img,0,0);
}
</script>

绘制背景

<script type="text/javascript">
/*  
设置背景  
	createPattern(img,平铺方式)  
	平铺方式:repeat,repeat-x,repeat-y,no-repeat  
*/ 
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
img.onload = function () {
	var bg = cxt.createPattern(img,"no-repeat");  
	cxt.fillStyle = bg;  
	cxt.fillRect(0,0,c.width,c.height);  //.fillRect(x,y,width,height);
}
</script>

canvas保存图片

canvas在浏览器端，不能实现保存图片功能，要实现该功能，需要将canvas转成图片的形式呈现，这里就需要调用toDataURL()方法，并赋给image的src的属性，然后保存图片

调用toDataURL()方法时，如果canas中应用了图片或者背景图片,这里有2点需要注意：

需要在图片的onload事件中调用toDataURL()方法
图片和访问链接需要允许跨域请求

受限于 CORS 策略，会存在跨域问题，虽然可以使用图像（比如append到页面上）但是绘制到画布上会污染画布，一旦一个画布被污染,就无法提取画布的数据，比如无法使用使用画布toBlob(),toDataURL(),或getImageData()方法;当使用这些方法的时候会抛出如下安全错误

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

解决这个问题，需要2步

1.图片设置：crossOrigin属性

代码片段：img.setAttribute(“crossOrigin”,’Anonymous’)

注：该代码需要写在img.src的前面，才能生效

2.需要服务器端代码允许，资源跨域使用，也就是设置CORS跨域配置，Access-Control-Allow-Origin

2个小例子

两个小球碰撞例子