一，canvas简介
1，我们说canvas，是一个html5的一种元素，通过使用javascript，可用于绘制图形，动画，图表，照片构图，或在飞行的任何其他可视化对象。
2，支持的浏览器，
Internet Explorer (9.0+)
Safari (3.0+)
Firefox (3.0+)
Chrome (3.0+)
Opera (10.0+)
iOS (1.0+)
Android (1.0+)
3，开始使用
如果这里不定义widht和height默认是宽300，高150
，
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d'); //webgl : 3D绘图
，
//oGC.fillRect(50,50,100,100);//填充 oGC.strokeRect(50,50,100,100);//带边框的方块（这里会感觉到边框有两像素）换成下面的 （造成的原因：我们的画图跟在ps里面画图是一样的，我们从坐标为50，50处开始画图边框为1像素的方块，他从边框的1像素的中心处开始画，然后分成0.5。。计算机会自动给我填充成1像素。。所以看上去边框有两像素） oGC.strokeRect(50.5,50.5,100,100);
，
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
oGC.fillStyle = 'red';
oGC.strokeStyle = 'blue';
oGC.lineWidth = 10;
oGC.fillRect(50,50,100,100);
oGC.strokeRect(50.5,50.5,100,100);
这里有个顺序问题。
，
边界绘制
oGC.lineJoin = 'bevel';
，
oGC.beginPath();//开始 oGC.moveTo(100,100);//移动 oGC.lineTo(200,200);//线 oGC.lineTo(300,200);//另一个线 oGC.closePath();//闭合 oGC.stroke();
，
oGC.beginPath(); oGC.rect(100,100,100,100);//矩形 oGC.closePath(); oGC.fill(); oGC.clearRect(0,0,oC.width,oC.height);//删除一个画布的矩形区域的
，
oGC.save();//保存路径 oGC.fillStyle = 'red'; oGC.beginPath(); oGC.moveTo(100,100); oGC.lineTo(200,200); oGC.lineTo(300,200); oGC.closePath(); oGC.fill(); oGC.restore();//恢复路径
，
鼠标画线
，
方块运动
使用定时器来清除画布再次画
，
画圆，弧度
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
oGC.moveTo(200,200);
//弧度 = 角度*Math.PI/180
oGC.arc(200,200,150,0,90*Math.PI/180,true);
oGC.stroke();
};
，
可以来画个时钟
，
绘制其他曲线
arcTo(x1,y1,x2,y2,r)
第一组坐标，第二组坐标，半径
quadraticCurveTo(dx,dy,x1,y1);
贝塞尔曲线，第一组控制点，第二组结束坐标
bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1);
贝塞尔曲线，第一组控制点，第二组控制点，第三组结束坐标
，
变换
translate
偏移，从起点为基准点，移动当前坐标位置
rotate
旋转，参数为弧度
scale
缩放
，
移动加缩放的方块
这里未完待续，，，，，，，，，，，
二，使用canvas完成简易祖玛游戏直接上代码可以运行
html5canvasZM