canvas时钟

2018-06-24 02:06:51来源：未知阅读 ()

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <canvas id="canvas" width="500" height="500">您的浏览器不支持，请更新</canvas>
    <script>
        //绘制图片：drawImage(image,dx,dy[,dWidth,dHeight]) 复制图片：drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
        //意思为 把一张图片image放到canvas中，坐标是dx,dy控制图片位置以canvas左上角为坐标原点，dw,dh控制图片在canvas中显示的大小，
        //sx和sy代表你要从哪开始裁剪图片，sw和sh代表你要裁剪的那部分的大小
        //sx,sy,sWidth,sHeight在图像中指定源矩形，dx,dy,dWidth,dHeight在画布上指定目标矩形
        var c=document.getElementById("canvas");//获取canvas元素
        var ctx=c.getContext("2d");//获取渲染上下文
        function drawClock(){//创建函数
            ctx.clearRect(0,0,c.width,c.height);//clearRect在给定矩形内清空一个矩形，0，0清空起始点，后两者为清空图形长宽
            var now = new Date();//创建变量时分秒
            var sec = now.getSeconds();
            var min = now.getMinutes();
            var hour = now.getHours();
            hour += min/60;//60分小时加一
            hour-hour>12?hour-12:hour;//三元运算符，大于12减去12，小于则不变
            //表盘
            ctx.lineWidth=10;//lineWidth 属性设置或返回当前线条的宽度，以像素计
            ctx.strokeStyle="deepskyblue";//strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
            ctx.beginPath();//起始一条路径，或重置当前路径
            ctx.arc(250,250,200,0,360,false);//创建弧/曲线（用于创建圆形或部分圆）
            //arc(x,y,r,sAngle,eAngle,counterclockwise)
            //圆中心xy坐标r为半径，sAngle,eAngle起始角结束角，counterclockwise可选规定应该逆时针(false)还是顺时针(true)绘图。
            ctx.closePath();//创建从当前点回到起始点的路径
            ctx.stroke();//绘制已定义的路径。
            //刻度
            //1.时刻度
            for(var i=0;i<12;i++){
                ctx.save();//保存当前环境的状态。
                //设置时针粗细
                ctx.lineWidth-7;
                ctx.strokeStyle="#000";//设置颜色
                //设置0，0点
                ctx.translate(250,250);//重新映射画布上的(0,0)位置，即从250，250点为起始点开始绘制，而不是画布左上角的00点
                //旋转角度
                ctx.rotate(i*30*Math.PI/180);//旋转当前绘图，旋转i*30度，共绘制12个时针的刻度
                ctx.beginPath();//开始一条路径，从位置0,-170。创建到达位置0,-190的一条线
                ctx.moveTo(0,-170);//之后就会随着角度变化而绘制12个时针刻度
                ctx.lineTo(0,-190);//时针刻度宽7，长20
                ctx.closePath();
                ctx.stroke();
                ctx.restore();//返回之前保存过的路径状态和属性
            }
            //分刻度
            for(var i=0;i<60;i++){//注释同时针
                ctx.save();
                //分刻度粗细
                ctx.lineWidth-5;
                ctx.strokeStyle="orangered";
                //重置
                ctx.translate(250,250);
                //旋转角度
                ctx.rotate(i*6*Math.PI/180);//旋转6度的倍数
                //画分刻度
                ctx.beginPath();
                ctx.moveTo(0,-180);//分针刻度宽5，长10
                ctx.lineTo(0,-190);
                ctx.closePath();
                ctx.stroke();
                ctx.restore();
            }
            //时针指针
            ctx.save();
            ctx.lineWidth-7;
            ctx.strokeStyle="#000";
            //设置异次元空间0，0点
            ctx.translate(250,250);
            //设置角度
            ctx.rotate(hour*30*Math.PI/180);//旋转角度小时*30
            ctx.beginPath();
            ctx.moveTo(0,-140);//宽度7长度150
            ctx.lineTo(0,10);
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
            //分针
            ctx.save();
            ctx.lineWidth-5;
            ctx.strokeStyle="orangered";
            //重置
            ctx.translate(250,250);
            ctx.rotate(min*6*Math.PI/180);//旋转角度分*6度
            ctx.beginPath();
            ctx.moveTo(0,-160);
            ctx.lineTo(0,15);
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
            //秒针
            ctx.save();
            ctx.strokeStyle="orchid";
            ctx.lineWidth-3;
            //重置
            ctx.translate(250,250);
            ctx.rotate(sec*6*Math.PI/180);
            ctx.beginPath();
            ctx.moveTo(0,-170);
            ctx.lineTo(0,20);
            ctx.closePath();
            ctx.stroke();


            //设置时针，分针，秒针交叉点
            ctx.beginPath();
            ctx.arc(0,0,5,0,360,false);//半径5的一个圆
            ctx.closePath();
            //填充样式
            //设置笔触样式(秒针已设）
            ctx.stroke();
            ctx.fillStyle="wheat";
            ctx.fill();
            //设置秒针前段小点
            ctx.beginPath();
            ctx.arc(0,-150,5,0,360,false);//半径5的一个圆
            ctx.closePath();
            ctx.stroke();
            ctx.fillStyle="wheat";
            ctx.fill();
            ctx.restore();
        }
        drawClock();//调用函数
        setInterval(drawClock,1000);//一秒走一次
    </script>
</body>
</html>