canvas实现DW手表

最新推荐文章于 2021-10-28 18:50:42 发布
Ekko__
最新推荐文章于 2021-10-28 18:50:42 发布
阅读量386
点赞数 1
文章标签： canvas js
本文链接：https://blog.csdn.net/weixin_38993093/article/details/86512948
版权
canvas实现DW手表

在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas width="500" height="500" style="box-shadow: 0 0 10px #333333"></canvas>
    <script>
        // 获取画布
        var can = document.getElementsByTagName('canvas')[0];
        //给画笔
        var cas = can.getContext('2d');


        function colock() {
            // 清空画布
            cas.clearRect(0,0,500,500);
            // 开始绘制
            cas.beginPath();
            // 绘制一个手表
            cas.arc(250,250,200,0,Math.PI*2);
            // 手表变宽
            cas.lineWidth = 6;
            // 描边
            cas.stroke();
            // 闭合绘制
            cas.closePath();

            // 开始绘制时刻
            // 利用循环绘制出12个时刻
            for (var i  = 0; i < 12; i++){
                // 保存当前状态
                cas.save();
                cas.beginPath();
                // 定义原点位置
                cas.translate(250,250);
                // 旋转的角度
                cas.rotate(Math.PI/6 * i);
                // 时刻的绘制
                cas.moveTo(0,-200);
                cas.lineTo(0,-180);
                // 时刻的宽度
                cas.lineWidth = 4;
                // 描边
                cas.stroke();
                // 绘制时刻文本
                var hour = i==0?60:i*5;
                // 文本居中
                cas.textAlign = 'center';
                // 文本位置
                cas.fillText(hour,0,-160);
                cas.closePath();
                // 恢复状态
                cas.restore();
            }
            // 开始绘制分刻
            // 利用循环绘制出60个分刻
            for (var i  = 0; i < 60; i++){
                // 保存当前状态
                cas.save();
                cas.beginPath();
                // 定义原点位置
                cas.translate(250,250);
                // 旋转角度
                cas.rotate(Math.PI/30 * i);
                cas.moveTo(0,-200);
                cas.lineTo(0,-190);
                cas.lineWidth = 2;
                cas.stroke();
                cas.closePath();
                // 恢复状态
                cas.restore();
            }
            // 定义手表文本logo
            cas.font = '18px';
            cas.textAlign = 'center';
            cas.fillText('Daniel Wellington',250,160);
            // 获取当前时间
            var nowTime = new Date();
            var h = nowTime.getHours(),      //获取当前时
                m = nowTime.getMinutes(),    //获取当前分
                s = nowTime.getSeconds();    //获取当前秒
            //因为获取到的时是0-24，所以当h>12时让它减去12
            h = h>12 ? h - 12 : h;
            //将小时转化为实时刻度
            h += m/60;
            //将分钟转化为实时刻度
            m += s/60;

            // 开始绘制时针
            // 保存当前状态
            cas.save();
            cas.beginPath();
            // 定义原点位置
            cas.translate(250,250);
            // 旋转角度
            cas.rotate(Math.PI/6 *h);
            // 时针的绘制
            cas.moveTo(0,10);
            cas.lineTo(0,-100);
            // 圆帽
            cas.lineCap = 'round';
            // 时刻的宽度
            cas.lineWidth = 4;
            // 描边
            cas.stroke();
            // 关闭绘制
            cas.closePath();
            // 恢复状态
            cas.restore();

            // 开始绘制分针
            // 保存当前状态
            cas.save();
            cas.beginPath();
            // 定义原点位置
            cas.translate(250,250);
            // 旋转角度
            cas.rotate(Math.PI/30 * m);
            // 分针的绘制
            cas.moveTo(0,15);
            cas.lineTo(0,-130);
            // 圆帽
            cas.lineCap = 'round';
            // 分针的宽度
            cas.lineWidth = 3;
            // 描边
            cas.stroke();
            // 关闭绘制
            cas.closePath();
            // 恢复状态
            cas.restore();

            // 开始绘制秒针
            // 保存当前状态
            cas.save();
            cas.beginPath();
            // 定义原点位置
            cas.translate(250,250);
            // 旋转角度
            cas.rotate(Math.PI/30 * s);
            // 秒针的绘制
            cas.moveTo(0,20);
            cas.lineTo(0,-150);
            // 圆帽
            cas.lineCap = 'round';
            // 秒针的宽度
            cas.lineWidth = 1;
            //秒针的颜色
            cas.strokeStyle = 'blue';
            // 描边
            cas.stroke();
            // 关闭绘制
            cas.closePath();
            // 绘画秒针上的小圆
            cas.beginPath();
            cas.arc(0,-120,5,0,Math.PI*2);
            cas.lineWidth = 1;
            // 填充的颜色
            cas.fillStyle= '#fff';
            // 填充
            cas.fill();
            // 描边
            cas.stroke();
            cas.closePath();
            // 恢复状态
            cas.restore();

            // 开始绘制一个圆心
            cas.save();
            cas.beginPath();
            // 定义原点位置
            cas.translate(250,250);
            // 绘制一个半径为5的圆心
            cas.arc(0,0,5,0,Math.PI*2);
            cas.lineWidth = 1;
            // 填充的颜色
            cas.fillStyle= '#fff';
            // 填充
            cas.fill();
            // 描边
            cas.stroke();
            // 关闭绘画
            cas.closePath();
            // 恢复
            cas.restore();
        }
        // 初始化
        colock()
        // 设置一个定时器实时获取时间
        setInterval(function () {
            colock();
        },1000)
    </script>
</body>
</html>