十分钟学会canvas

一句话描述：canvas是HTML5加入的用来绘制2D图像与文字的元素。

基础

简单步骤：

1. var c = document.getElementById("mycanvas");获取dom
2. var ct = c.getContext("2d");取得2D上下文
3. ct.fillStyle = "red";确定绘图方式（填充/描边）
4. ct.fillRect(0,0,50,50);确定绘图位置和大小，前两个参数表示起始点的xy坐标，后两个参数表示宽和高

绘图方式：

　　2D上下文提供两种基本的操作。

　　1.填充。fillStyle来确定，fillRect来确定位置和大小。

　　2.描边。strokeStyle来确定，strokeRect来确定位置和大小。

实例1：画一个正方形

 //带边框

//HTML中

<canvas id="mycanvas" width="200" height="200"></canvas>

//js中

var c = document.getElementById("mycanvas");
var ct = c.getContext("2d");
ct.fillStyle = "aqua";
ct.fillRect(0,0,50,50);
ct.strokeStyle = "red";
ct.strokeRect(0,0,50,50);

好，最基本的操作学会了，继续往下走。

初级：

clearRect():

　　可以用来清除画布的内容。

实例2：画两个正方形，中间部分为空

var c = document.getElementById("mycanvas");
var ct = c.getContext("2d");
ct.fillStyle = "aqua";
ct.fillRect(0, 0, 50, 50);
ct.fillStyle = "red";
ct.fillRect(30, 30, 50, 50);
ct.clearRect(30, 30, 20, 20);

注意，clearRect的其实位置是从左上角开始的。

绘制时钟

 实例3：画两个圆形作为时钟的轮廓，里面时针分针显示为九点。

需要用到的方法：

　　beginPath()：表示要开始绘制路径（注意，只有矩阵能被简单的绘制，其他的图形都要用到额外的方法）

　　arc(x,y,radius,startAngle.endAngle.counterclockwise):以(x,y)为原型绘制一条弧线，半径为radius，后面两个参数表示起始角度和结束角度，最后一个值表示起始和结束是否按逆时针方向计算，值为true为顺时针.注意，圆形要考虑原本的画布的大小，超出的部分会被隐藏.

　　lineTo(x,y)：从上一点开始绘制一条直线，到（x,y）为止

　　moveTo(x,y):将游标移到(x,y)，不画线.

            var c = document.getElementById("mycanvas");
            var ct = c.getContext("2d");
            ct.beginPath();
            //画外圆
            ct.arc(100,100,90,0,2*Math.PI,false);
            //画内圆
            ct.moveTo(180,100);//画图会从0弧度开始画，也就是最右边，所以需要将起始点移到这里
            ct.arc(100,100,80,0,2*Math.PI,false);
            //画分针
            ct.moveTo(100,100);
            ct.lineTo(100,30);
            //画时针
            ct.moveTo(100,100);
            ct.lineTo(50,100);
            ct.stroke();

实例4:绘制带数字的时钟

待续