绘制倒计时时钟

1 绘制一条线

//设置状态
context.moveTo(100,100) //起点
context.lineTo(700,700) //终点
//绘制
context.stroke() //使线呈现  stroke中文解析：划掉; 轻抚; 轻触; 敲击;

//我们可以用下面api绘制线条
context.moveTo();
context.lineTo();
//在定义多条路径要在相对应的线条加上
context.beginPath();
context.closePath();
//利用下面可以定义线条的宽度，颜色，填充颜色
context.lineWdith();
context.strokeStyle();
context.fillStyle();
//利用下面方法使得线条绘制出来，和填充颜色成功
context.stroke();
context.fill(); 

然后利用刚学的线条绘制个七巧板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>七巧板</title>
</head>
<body>
    <canvas id="canvas" width="1000" height="768" style="border:1px solid #000;display:block;margin:50px auto"></canvas>
    <script type="text/javascript">
    window.onload=function(){
        var qiqiao = [
            {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
            {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
            {p:[{x:800,y:0},{x:800,y:400},{x:600,y:800},{x:600,y:200}],color:"#ef3d61"},
            {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
            {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
            {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#caff67"},
            {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800},{x:400,y:800}],color:"#f6ca29"},
        ]
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');

        canvas.width = 800;
        canvas.height = 800;

        for(var i = 0; i<qiqiao.length;i++){
            console.log(qiqiao.length);
            draw(qiqiao[i],context);
        }

        function draw(qiqiao , cxt ){
            cxt.beginPath();
            cxt.moveTo(qiqiao.p[0].x , qiqiao.p[0].y);
            for(var i = 1; i < qiqiao.p.length ; i++){
                console.log(qiqiao.p.length );
                cxt.lineTo( qiqiao.p[i].x , qiqiao.p[i].y);
            }
            cxt.fillStyle = qiqiao.color;
            cxt.fill();
        }
    }
    </script>
</body>
</html>

2 绘制弧线

canvas 中的方法

context.arc(
    context,centery,radius,startingAngle,endingAngle,
    anticlockwise = false
    //圆心坐标x、圆心坐标y、半径值、弧度起始值、弧度结束值、顺逆时针（可选，默认flase 瞬时）
)

圆的起始状态和终点状态看图

屏幕快照 2016-11-30 下午11.57.13.png

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆弧示例</title>
</head>
<body>
    <canvas id="canvas" width="1000" height="768" style="border:1px solid #000;display:block;margin:50px auto"></canvas>
    <script type="text/javascript">
    window.onload=function(){
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');

        canvas.width = 1024;
        canvas.height = 768;
        
        context.lineWidth = 5
        context.strokeStyle = "#000";
        // 此例子有closePath() 作用也有闭合的功能
        for(var i =0 ; i<10 ;i++){
            context.beginPath()
            context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10)
            context.closePath() 

            context.stroke()
        }

        // 此例子没有closePath() 说明beginPath()和closePath()不用同时出现
        for(var i =0 ; i<10 ;i++){
            context.beginPath()
            context.arc(50+i*100,180,40,0,2*Math.PI*(i+1)/10)

            context.stroke()
        }
        //逆时针
        for(var i =0 ; i<10 ;i++){
            context.beginPath()
            context.arc(50+i*100,300,40,0,2*Math.PI*(i+1)/10,true)
            context.closePath() 

            context.stroke()
        }
        for(var i =0 ; i<10 ;i++){
            context.beginPath()
            context.arc(50+i*100,480,40,0,2*Math.PI*(i+1)/10,true)

            context.stroke()
        }
        //填充颜色
        context.fillStyle = "#000";
        for(var i =0 ; i<10 ;i++){
            context.beginPath()
            context.arc(50+i*100,600,40,0,2*Math.PI*(i+1)/10,true)

            context.stroke()
            context.fill();
        }
    }
    </script>
</body>
</html>