浅谈HTML5 canvas（一）

HTML5添加的最受欢迎的功能就是<canvas>元素，这个元素负责在页面中设定一个区域，然后就可以通过JavaScript动态在这个区域绘制图形。

主流浏览器都支持canvas，如IE9+、FireFox1.5+、Safari2+、Opera9+、Chrome、iOS版Safari及安卓版Webkit，IE8及之前的版本不支持<canvas>元素。

Canvas除了具备基本绘图能力的2D上下文，还有一个名为WebGL的3D上下文。目前支持canvas元素的浏览器都支持2D上下文，但对WebGL的支持还不够好。

 

1、基本用法

要使用<canvas>元素，就要先设置width和height属性，指定可以绘制的区域大小，<canvas>和</canvas>标签中的内容是当浏览器不支持<canvas>元素时显示的信息。

注意1：为了避免绘图时canvas元素还未加载，建议将绘制脚本放置在</body>标签之前。

注意2：canvas元素默认宽 300px，高 150px，设置canvas元素的width和height属性有几种方法：

1) HTML中：<canvas width="500" height="500">浏览器不支持canvas元素</canvas>（推荐使用）

2)JavaScript中：canvas.width = 500; canvas.height = 500; （可以使用）

3) CSS中：canvas{ width:500px; height:500px; }（会拉伸，不建议使用）。

4) HTML中：<canvas style="width:500px;height:500px">浏览器不支持canvas元素</canvas>（会拉伸，不建议使用）。

5) JavaScript中：canvas.style.width = "500px"; canvas.style.height = "500px"; （会拉伸，不建议使用）。

6) jQuery中：$("canvas").width(500);$("canvas").height(500); （会拉伸，不建议使用）。

要在画布canvas上绘图，需要取得绘图上下文。要取得绘图上下文的引用，需要调用getContext()方法并传入上下文的名字，如传入“2d”，就可以取得2D上下文对象。在使用<canvas>元素之前，需要先检测getContext()方法是否存在。

使用toDataURL()方法，可以导出在<canvas>元素上绘制的图像，该方法接受一个参数，即图像的MIME类型格式，而且适合用于创建图像的任何上下文。

取得画布中的一幅PNG格式的图像（默认情况下，浏览器会将图像编码为PNG格式，除非另行指定，Firefox和Opera也支持基于image/jpeg的JPEG编码格式，由于该方法是后来才增加的，所以支持canvas的浏览器也是在较新的版本中才加入了对它的支持，如IE9+、Firefox3.5和Opera10）：

var canvas = document.getElementsByTagName("canvas")[0];
if (canvas.getContext) {
	var imgURI = canvas.toDataURL("image/png");
	var image = document.createElement("img");
	image.src = imgURI