用canvas画一个时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas id="myCanvas" width="1000" height="1000"
    style="border:1px solid #000000;">您的浏览器不支持canvas
</canvas>
<script type="text/javascript">
    var c =document.querySelector('#myCanvas');
    // 标识画布并指明上下文
    var ctx = c.getContext('2d');

    // 1.表盘
    ctx.lineWidth = 10;
    ctx.stroeStyle = '#000';
    ctx.beginPath();
    ctx.arc(250,250,200,0,360,false);
    ctx.stroke()
    ctx.closePath()
    // 刻度
        //     时刻度
        for (var i = 0; i < 12; i++) {
            ctx.save();
            ctx.lineWidth= 8;
            ctx.strokeStyle = 'orange';
                // 设置0,0点位置
                ctx.translate(250,250);
                // 设置旋转角度
                ctx.rotate(i*30*Math.PI/180);

                ctx.beginPath();
                ctx.moveTo(0,170);
                ctx.lineTo(0,190);
                ctx.stroke();
                ctx.closePath();
                ctx.restore()
            }
        // 分刻度
        for (var i = 0; i < 60; i++) {
            ctx.save();
            ctx.lineWidth= 4.5;
            ctx.strokeStyle = 'orange';
                // 设置0,0点位置
                ctx.translate(250,250);
                // 设置旋转角度
                ctx.rotate(i*6*Math.PI/180);

                ctx.beginPath();
                ctx.moveTo(0,180);
                ctx.lineTo(0,190);
                ctx.stroke();
                ctx.closePath();
                ctx.restore()
            }
        // 时针
        ctx.save();
        ctx.lineWidth=7;
        ctx.strokeStyle="#000";
        ctx.translate(250,250);
        ctx.rotate(270*Math.PI/180);
        ctx.beginPath();
        ctx.moveTo(0,110);
        ctx.lineTo(0,-10);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();

        // 分针
        ctx.save();
        ctx.lineWidth=5;
        ctx.strokeStyle="#000";
        ctx.translate(250,250);
        ctx.rotate(210*Math.PI/180);
        ctx.beginPath();
        ctx.moveTo(0,130);
        ctx.lineTo(0,-10);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();

        // 秒针
        ctx.save();
        ctx.lineWidth=3;
        ctx.strokeStyle="#000";
        ctx.translate(250,250);
        ctx.rotate(0*Math.PI/180);
        ctx.beginPath();
        ctx.moveTo(0,150);
        ctx.lineTo(0,-10);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();

        // 表盘中心
        ctx.lineWidth=2;
        ctx.storeStyle='red';
        ctx.beginPath();
        ctx.arc(250,250,3.5,0,360,false);
        ctx.stroke();
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.closePath();

        // 设置时针，秒针前面的小圆点
        ctx.translate(250,250);
        ctx.beginPath();
        ctx.arc(0,140,2,0,360,false);
        ctx.stroke();
        ctx.fillStyle="white";
        ctx.fill();
        ctx.closePath()

    </script>

</body>
</html>
用canvas画一个时钟

猜你喜欢
