canvas---用canvas制作钟表

首先，看效果~~~绘制钟表如图

思路：

（1）绘制一个60等分的圆，用一个半径稍小些的白色的圆覆盖画线区域，形成60分钟的刻度。

（2）继续在以上基础上，绘制一个12等分的圆，用一个半径稍小些的白色的圆覆盖画线区域，形成12小时的刻度。

注意调整画线的宽度，以明显区分时针的刻度和分针的刻度。

(3)获取本地时间，并绘制时针，分针，秒针弧度。弧度=角度*Math.PI/180

// 获取时间

var oDate = new Date();

var oHours = oDate.getHours();

var oMinutes = oDate.getMinutes();

var oSeconds = oDate.getSeconds();

// 计算当前时间时针、分针、秒针对应的弧度

var oHoursValue = (-90 + 30 * oHours + oMinutes / 2) * Math.PI / 180;

var oMinutesValue = (-90 + 6 * oMinutes) * Math.PI / 180;

var oSecondsValue = (-90 + 6 * oSeconds) * Math.PI / 180

注意：时针角度要特殊处理：+ oMinutes / 2

代码中涉及的方法和属性：

方法	描述
ctx.fillRect(x,y,width,height);	绘制“被填充”的矩形，左上角的 x 坐标，左上角的 y 坐标,默认颜色黑色
ctx.fill()	填充
ctx.stroke()	画线
ctx.beginPath()	开始绘制路径
ctx.closePath()	结束绘制路径
ctx.moveTo(10,10)	移动到绘制的新的目标点
ctx.arc(x,y,半径,起始弧度,结束弧度,旋转方向)	创建弧/曲线(用于创建圆或部分圆)，(x,y)圆心坐标，旋转方向默认为false，顺时针方向，true为逆时针方向；弧度与角度的关系：弧度=角度*Math.PI/180

属性	描述
ctx.fillStyle=”red”	设置填充颜色为红色
ctx.lineWidth=10	线宽为 10 像素

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用canvas绘制钟表</title>
    <style>
    #cv{
        border: 1px solid #333;
    }
    </style>
    <script>
    window.onload=function(){
        var cv=document.getElementById("cv");
        var ctx=cv.getContext("2d");
        setInterval(toDrawClock,1000)
        
      
        function toDrawClock(){
            var x=200;
            var y=200;
            var r=150;
            ctx.clearRect(0,0,cv.width,cv.height);
            
            // 获取本地时间
            var oDate=new Date();
            var oHours=oDate.getHours();
            var oMinutes=oDate.getMinutes();
            var oSeconds=oDate.getSeconds();

            // 计算当前时间对应的弧度
            var oHoursValue=(-90+oHours*30+oMinutes/2)*Math.PI/180;
            var oMinutesValue=(-90+oMinutes*6)*Math.PI/180;
            var oSecondsValue=(-90+oSeconds*6)*Math.PI/180;

            // 分针刻度，每6度一分钟
            ctx.beginPath();
            for(var i=0;i<60;i++){
                ctx.moveTo(x, y);
                ctx.arc(x, y, r, 6*i* Math.PI / 180, 6*(i+1) * Math.PI / 180);
            }
            ctx.closePath();
            ctx.stroke();

            ctx.fillStyle = "white";
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.arc(x, y, 19/20*r,0, 360 * Math.PI / 180);
            ctx.closePath();
            ctx.fill();

            // 时针刻度，每30度一小时
            ctx.beginPath();
            ctx.lineWidth=3;
            for(var i=0;i<12;i++){
                ctx.moveTo(x, y);
                ctx.arc(x, y, r, 30*i* Math.PI / 180, 30*(i+1) * Math.PI / 180);
            }
            ctx.closePath();
            ctx.stroke(); 

            ctx.fillStyle = "white"; 
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.arc(x, y, 18/20*r,0, 360 * Math.PI / 180);
            ctx.closePath();
            ctx.fill();

            // 绘制时针
            ctx.beginPath();
            ctx.lineWidth=6;
            ctx.moveTo(x, y);
            ctx.arc(x, y, 12/20*r,oHoursValue,oHoursValue);
            ctx.closePath();
            ctx.stroke();
            // 绘制分针
            ctx.beginPath();
            ctx.lineWidth=4;
            ctx.moveTo(x, y);
            ctx.arc(x, y, 16/20*r,oMinutesValue, oMinutesValue);
            ctx.closePath();
            ctx.stroke();
            // 绘制秒针
            ctx.beginPath();
            ctx.lineWidth=2;
            ctx.moveTo(x, y);
            ctx.arc(x, y, 18/20*r,oSecondsValue, oSecondsValue);
            ctx.closePath();
            ctx.stroke();
        }
        

    }
    </script>
</head>
<body>
    <canvas id="cv" width="400px" height="400px">
        不支持的浏览器
    </canvas>
</body>
</html>