Html5 系列之:Canvas绘图

Canvas是什么？它能做什么？简单的说Canvas是一个容器，可以往里面添加各种内容，如图片，绘制图形，甚至添加另外一个Canvas。各浏览器对Canvas的支持对比图：先看一个简单的例子：

//创建一个canvas对象
var canvas = document.createElement('canvas');
canvas.height = 100;
canvas.width = 300;
//获取canvas上下文环境
ctx = canvas.getContext('2d');

  //画一个矩形，并用fillstyle来填充
ctx.fillStyle ="#3e4";
ctx.fillRect(20,20,50,50);

下面通过例子来看看canvas有哪些方法。

//也可创建一个，如newCanvas（）；
	var canvas  =document.querySelector("#canvas1");

	//获取canvas上下文环境
	ctx = canvas.getContext('2d');

	//画一个矩形，并用fillstyle来填充
	ctx.fillStyle ="#3e4";
	ctx.fillRect(20,20,50,50);

	//设置线条颜色
	ctx.strokeStyle ="#00f0f0";
	//画一个矩形边缘
	ctx.strokeRect(10,10,100,100);

	//画一条线
	ctx.beginPath();
	ctx.moveTo(40,40);
	ctx.lineTo(500,300);

	ctx.strokeStyle ="red";
	ctx.stroke();//关键

	//添加一些文字
	ctx.font="bold 16px";
	ctx.fillText("Hello Html5",250,250);

	//添加图片
	var img = new Image();
	img.src="images/google-logo-small.png";
	img.onload = function(){
		ctx.drawImage(img,300,100);
		ctx.drawImage(img,350,200);
	}

//画一段弧线
	ctx.beginPath();
    ctx.arc(650, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
    ctx.lineWidth = 15;
    ctx.lineCap = 'round';
    ctx.strokeStyle = 'rgba(255, 127, 0, 0.5)';
    ctx.stroke();

网上的一些实例：Canvas绘制loading图像： http://html5demos.com/canvasCanvas 2dcontext接口参考：http://dev.w3.org/html5/2dcontext/Overview.html