1、canvas画布常用属性：width、height，使用canvas时首先需要获取画布：

var can = document.getElementById("canvas");
var ctx = can.getContext('2d');

在画布上每一笔都会有一个开始、结束，否则画出来的效果会连在一起

ctx.beginPath();
。。。
ctx.closePath();


2、画笔的两种画法：

1）stroke：非填充画法；

2）fill：填充画法；

ctx.beginPath();
ctx.fillStyle="black";
ctx.lineWidth=2;
ctx.arc(250,250,5,0,360*Math.PI/180,true);
ctx.fill();
ctx.closePath();


ctx.beginPath();
ctx.strokeStyle="black";
ctx.lineWidth=8;
ctx.moveTo(0,-150);
ctx.lineTo(0,10);
ctx.stroke();
ctx.closePath();


3、常见图形：

1）直线：ctx.moveTo(x,y);ctx.lineTo(x,y);

2）圆： arc(X,Y,Radius,startAngle,endAngle,anticlockwise),意思是（圆心X坐标，圆心Y坐标，半径，开始角度（弧度），结束角度弧度，是否按照顺时针画）；

3）矩形：

 fillRect(X,Y,Width,Height)；
 strokeRect(X,Y,Width,Height)；


4、坐标：

1）translate(x,y):把坐标系原点设置为x,y.以后的坐标都是相对于这个标准的。

2）rotate（90 * Math.PI / 180） 按顺时针旋转90度。

3）save()：用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。

4）restore()：用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。save和restore要配对使用（restore可以比save少，但不能多），如果restore调用次数比save多，会引发Error。

5)clearRect(x,y,width,height);清除区域；


实例：小时钟

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>time</title>
    <style type="text/css">

        canvas{border:dashed 2px #CCC;margin: auto;}
    </style>
    <script type="text/javascript">
        var ctx = null;
        function aa() {
            var now = new Date();
            var s=now.getSeconds(),m=now.getMinutes(),h=now.getHours();
            h = h+ m/60;
            h=h>=12?h-12:h;
            
            ctx.clearRect(0,0,500,500);    ///初始化画布
            //画表盘
            ctx.beginPath();
            ctx.strokeStyle ="blue";
            ctx.lineWidth=10;
            ctx.arc(250,250,200,0,360*Math.PI/180,true);
            ctx.stroke();
            ctx.closePath();
            
            //画刻度
            for (var i=0;i<60;i++) {
                if (i%5 ==0 ) {
                    ctx.save();
                    ctx.translate(250,250);
                    ctx.rotate(i*6*Math.PI/180);
                    ctx.beginPath();
                    ctx.strokeStyle="black";
                    ctx.lineWidth=8;
                    //alert(i*30);
                    ctx.moveTo(0,-190);
                    ctx.lineTo(0,-170);
                    ctx.stroke();
                    ctx.closePath();
                    ctx.restore();
                } else {
                    ctx.save();
                    ctx.translate(250,250);
                    ctx.rotate(i*6*Math.PI/180);
                    ctx.beginPath();
                    ctx.strokeStyle="black";
                    ctx.lineWidth=4;
                    //alert(i*30);
                    ctx.moveTo(0,-190);
                    ctx.lineTo(0,-180);
                    ctx.stroke();
                    ctx.closePath();
                    ctx.restore();
                }
                
            }
            
            //时针
            ctx.save();
            ctx.translate(250,250);
            ctx.rotate(h*30*Math.PI/180);
            ctx.beginPath();
            ctx.strokeStyle="black";
            ctx.lineWidth=8;
            //alert(i*30);
            ctx.moveTo(0,-150);
            ctx.lineTo(0,10);
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
            
            //分针
            ctx.save();
            ctx.translate(250,250);
            ctx.rotate(m*6*Math.PI/180);
            ctx.beginPath();
            ctx.strokeStyle="#abcdef";
            ctx.lineWidth=5;
            //alert(i*30);
            ctx.moveTo(0,-160);
            ctx.lineTo(0,15);
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
            
            //秒针
            ctx.save();
            ctx.translate(250,250);
            ctx.rotate(s*6*Math.PI/180);
            ctx.beginPath();
            ctx.strokeStyle="red";
            ctx.lineWidth=2;
            ctx.moveTo(0,-170);
            ctx.lineTo(0,20);
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
            
            //中心点
            ctx.save();
            ctx.beginPath();
            ctx.fillStyle="black";
            ctx.arc(250,250,5,0,360*Math.PI/180,true);
            ctx.fill();
            ctx.closePath();
            ctx.restore();

        }
        window.onload = function() {
            var can = document.getElementById("canvas");
            ctx = can.getContext('2d');
            
            
            //aa();

        }
        
        setInterval(aa,1000);
    </script>
 </head>
 <body >
    <canvas id="canvas" width=500px; height=500px;></canvas>

</body>
</html>


html5之canvas基础1_html5