用canvas画简易钟表


画钟表前，我们需要弄清楚钟表的构造和各个元素间的关系
同时还要学会弧度的运用
难点还是在于对context.save()和context.restore()的理解
把思路理清，写起来也会变得简单


效果图：




下面来看一下代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #div{
                
                text-align: center;
            }
            #canvas{
                border: 1px solid #000;
            }
        </style>
    </head>
    <body>
            <div id="div">
                <canvas id="canvas" width="500px" height="500px"></canvas>
            </div>
            
            <script>
                var canvas=document.getElementById("canvas");
                var ctx=canvas.getContext("2d");  
                var width=canvas.width;          //获取画布的宽
                var height=canvas.height;        //获取画布的高
                var r=width/2;                   //设置圆的半径为宽的一半
                
                function fun(){
                ctx.save()                      //保存当前的状态
                ctx.beginPath();                //开启一条路径
                ctx.translate(r,r);             //将画布原点改为（r，r）
                ctx.arc(0,0,r-5,0,Math.PI*2);   //设置半径为R-5的圆，因为设置了线宽为10，所以半径减去了线宽的一半
                ctx.closePath();                //闭合路径
                ctx.lineWidth=10;
                ctx.stroke();
                
//                
                var li=[3,4,5,6,7,8,9,10,11,12,1,2]   //设置一个数组保存钟表的数字刻度，按照弧度的起始位置设置
                for(var i=0 ;i<li.length;i++){
                    ctx.beginPath();
                    ctx.fillStyle="#000000"
                    ctx.textBaseline="middle";
                    ctx.textAlign="center";
                    ctx.font="18px Arial";
                    var x=Math.cos(Math.PI*2/12*i)*(r-30);  //用三角函数cos计算出数字所在的X坐标
                    var y=Math.sin(Math.PI*2/12*i)*(r-30);  //用三角函数cos计算出数字所在的X坐标
                    ctx.fillText(""+li[i]+"",x,y);
                    ctx.closePath();
                    
                    for(var j=0 ;j<60;j++){                 //画60个圆点为分秒刻度
                        ctx.beginPath();
                        var x=Math.cos(Math.PI*2/60*j)*(r-15);
                        var y=Math.sin(Math.PI*2/60*j)*(r-15);
                        if(j%5==0){
                            ctx.fillStyle="#000000";      //给整点刻度圆点设置为黑色
                        }else{
                            ctx.fillStyle="#ccc";        //其余设置为灰色
                        }
                        ctx.arc(x,y,2,0,Math.PI*2);
                        ctx.fill();
                        ctx.closePath();
                    }
                }
                }
                function drawHour(hour,minu){           //设置时针方法
                    ctx.save();                        //保存当前的状态
                    ctx.beginPath();
                    ctx.lineWidth=6;
                    var rad = Math.PI*2 / 12 * hour;
                    var radminu = Math.PI / 360 * minu;
                    ctx.rotate(rad + radminu)          //时针的旋转角度
                    ctx.moveTo(0,10);                  
                    ctx.lineTo(0,-r+150);              //绘制时针
                    ctx.lineCap="round";               //设置时针的圆角样式，lineCap受closePath影响，两者同时出现时，lineCap无效
                    ctx.stroke()
                    ctx.restore()                    //返回之前保存过的状态
                }
                function drawMinu(minu){             //设置分针方法
                ctx.save();                          //保存当前的状态
                ctx.beginPath();
                ctx.lineWidth = 4;
                var rad = Math.PI * 2 / 60 * minu;
                ctx.rotate(rad)
                ctx.moveTo(0,10);
                ctx.lineTo(0,-r+100);　　　　　　　　　//绘制分针
                ctx.lineCap="round";               //设置时针的圆角样式，lineCap受closePath影响，两者同时出现时，lineCap无效   
                ctx.stroke()　　　　　　　　　　　　　　//描边
                ctx.restore()                     //返回之前保存过的状态
                }
                function drawmiao(miao){
                ctx.save();                       //保存当前的状态
                ctx.beginPath();
                ctx.lineWidth = 1;
                var rad = Math.PI * 2 / 60 * miao;
                ctx.rotate(rad)
                ctx.moveTo(-2,20);
                ctx.lineTo(2,20);
                ctx.lineTo(1,-r+50);
                ctx.lineTo(-1,-r+50);
                ctx.closePath()                  //绘制秒针
                ctx.fillStyle="#f00"
                ctx.fill()
                ctx.restore()                   //返回之前保存过的状态
                }
                
                function draw(){
                ctx.clearRect(0,0,width,height);
                var datenow = new Date();
                var hour = datenow.getHours();
                var minu = datenow.getMinutes();
                var miao = datenow.getSeconds();
                
                fun()
                drawHour(hour,minu)
                drawMinu(minu)
                drawmiao(miao)                 //执行
                
                
                ctx.restore()                //返回之前保存过的状态
            
            }
            draw()                           //执行
            
            setInterval(draw,1000)           //定时器，设置间隔时间为1s
            </script>
    </body>
</html>
用canvas画简易钟表

猜你喜欢
