HTML5 Canvas 2D API 规范 1.0 中文版：
http://wenku.baidu.com/view/d841013d0912a2161479292d.html
<canvas id=”test”></canvas>
开始先学习三个方法：fillRect() strokeRect() clearRect()，它们接收四个参数，分别是：X轴坐标，Y轴坐标，宽，高 。
<script type=”text/javascript”>
var canvas = document.getElementById(“test”);
if(canvas.getContext){
var context = canvas.getContext(“2d”);//绘制一个2D绘图环境
context.fillStyle = “#ccc”; //颜色是#ccc的图形
context.fillRect(0,0,50,50); //fillRect绘制的是一个宽高各50的填充长方形
context.strokeRect(0,0,50,50); //strokeRect绘制的是边框长方形
context.clearRect(30,30,10,10); //clearRect()是清除画布区域的一部分
}
</script>
下一个例子：
<script type=”text/javascript”>
var canvas = document.getElementById(“test”);
if(canvas.getContext){ var context = canvas.getContext(“2d”); //新路径建立 context.beginPath();
//这个设置与CSS中设置字体一样，大小、字体、格式等 context.font = “12px 微软雅黑”; //设置文字如何对齐，与CSS中text-align属性一样 context.textAlign = “center”; //设置文字的基线，这个与CSS中的background:top;一样 context.textBaseline = “top”; //我们要绘制的字符串是12，坐标是X100 Y80的位置
context.fillText(“时钟表”,100,80);
//绘制圆 context.arc(100,100,99,0,2*Math.PI,false); //arc有六个参数，xy是绘制中心点在100 100的弧，然后半径为99。 //角度是在0和2*Math.PI之间，逆时针方向。 //绘制外圆 context.moveTo(194,100); //意思是把光标移动到194 100的这个坐标上，但是不绘制线条。 context.arc(100,100,94,0,2*Math.PI,false); //绘制时针 context.moveTo(100,100); context.lineTo(100,15); //从最后一点移动到100 15这个坐标上，然后绘制一条直线 //路径描边 context.stroke();
}
</script>
下一个例子：
<script type=”text/javascript”>
var canvas = document.getElementById(“test”);
if(canvas.getContext){ var context = canvas.getContext(“2d”); //旋转中 context.translate(100,100); //将原点坐标移动到100 100坐标上。 //旋转弧度 context.rotate(1); //以1的弧度开始旋转 //保存状态 context.fillStyle = “#ccc”; context.translate(100,100); context.save(); //调用save()方法后，将把这一状态保存起来。 //退回状态 context.restore(); }
</script>
