HTML5 Canvas 基础 一

一、Canvas 是什么

在网页上创建Canvas元素时，他会创建一块矩形区域。默认情况下该区域300px*150px, 使用Canvas编程，首先要获取其上下文(context)。接着在上下文中知心动作，最后将这些动作应用到上下文。可以将Canvas的这种编程方式想象成数据库事物：开发人员发起一个事务然后执行某些操作，最后提交事务。

Canvas的坐标是从左上角开始，X轴沿水平方向，Y轴沿垂直向下延伸，左上角坐标为X=0，Y=0 的点称作原点。

二、浏览器对Canvas支持性

浏览器	支持性
chrome	1.0+
Firefox	1.5+
IE	9.0
Opera	9.0+
safari	1.3+

IE是落后于其他浏览器，如果需要在旧版本IE中使用Canvas,可以选用explorerCanvas的开源项目，http://code.google.com/p/explorercanvas/ ，使用explorerCanvas时，需要判断当前浏览器是否为IE，如果是则在页面中嵌入：

<!--[if IE]><script src="excanvas.js"></script><![endif] -->

三、检测浏览器支持情况

try{
    document.createElement('canvas').getContext('2d');
    //页面中事先放置ID为support的元素用于显示消息
    document.getElementById('support').innerHTML='HTML5 Canvas is supported in your browser';
}catch(e){
    document.getElementById('support').innerHTML='HTML5 Canvas is not supported in your browser';
}

上面代码试图创建一个Canvas，并且获取其上下文，如果发生错误这可以捕捉错误，进而得知该浏览器不支持Canvas。

三、在页面中加入Canvas

1、在canvas中绘制一条对角线

function drawDiagonal(){
	var canvas = document.getElementById('diagonal');
	var context = canvas.getContext('2d');
	//用绝对坐标来创建一条路径
	context.beginPath();
	context.moveTo(70,140);
	context.lineTo(140,70);	
	//绘制
	context.stroke();
	
}
window.addEventListener('load', drawDiagonal,true);

在代码中调用了三个方法，beginPath、moveTo、lineTo ，这个过程很像拿起笔、移动到指定坐标、画线到指定坐标，但是方法moveTo、lineTo实际上并没有真正画出一条线，而是在结束canvas操作的时候使用context.stroke()方法完成绘制。重复上文那句话： 可以将Canvas的这种编程方式想象成数据库事物：开发人员发起一个事务然后执行某些操作，最后提交事务。

四、使用变换

canvas上绘制图像的另一种方式--使用变换，这个过程一般是从原点开始，应用变换（缩放、平移、旋转等），然后不断修改代码直至达到希望的效果。。。

//使用变换绘制对角线
function drawDiagonal2(){
	var canvas = document.getElementById('diagonal2');
	var context = canvas.getContext('2d');
	//保存当前状态
	context.save();
	
	//向右下方移动绘图上下文
	context.translate(70,140);
	//从原点开始绘制
	context.beginPath();
	context.moveTo(0,0);
	context.lineTo(70,-70);	
	context.stroke();
	
	//还原状态
	context.restore();
}
window.addEventListener('load', drawDiagonal2,true);

五、路径

现在进一步学习稍微复杂点的图形：路径

//使用路径
//将绘制方法单独写
function createCanopyPath(context){
	//开始
	context.beginPath();
	context.moveTo(-35,-50);
	context.lineTo(-15,-80);
	context.lineTo(-25,-80);
	context.lineTo(-5,-110);
	context.lineTo(-15,-110);
	
	context.lineTo(0,-140);
	context.lineTo(15,-110);
	context.lineTo(5,-110);
	context.lineTo(25,-80);
	context.lineTo(15,-80);
	context.lineTo(35,-50);
	
	//闭合路径--将起点和终点连接
	context.closePath();	
}
function drawTrails(){
	var canvas = document.getElementById('trails');
	var context = canvas.getContext('2d');
	
	context.save();
	context.translate(130,150);
	createCanopyPath(context);
	
	context.stroke();
	context.restore();
}
window.addEventListener('load', drawTrails,true);

代码很简单，先调用beginPath 告诉canvas要开始绘图了，之后反复使用lineTo绘制图形，下一个特殊的路径函数叫做closePath，这个函数和lineTo很像，唯一差别在于它会将路径的起点和终点闭合，再使用stroke绘制。

以上demo：http://1.ddemo.sinaapp.com/drawDiagonal.html

ok，明天继续---创建一个带有长跑道的树林。