代码-JS之使用canvas画时钟

效果：
在这里插入图片描述
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<canvas width="500" height="500" style="background-color: black;">
    您的浏览器版本太低，请升级后查看
</canvas>

<script>
    var canvas = document.getElementsByTagName('canvas')[0];
    var ctx = canvas.getContext('2d');

    function clock(){
        //先清除原来画布上的内容
        ctx.clearRect(0, 0, 500, 500);
        //画表盘
        ctx.beginPath();
        ctx.arc(250, 250, 200, 0, 2*Math.PI);
        ctx.lineWidth = 10;
        ctx.strokeStyle = '#474747';
        ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
        ctx.arc(250, 250, 210, 0, 2*Math.PI);
        ctx.lineWidth = 10;
        ctx.strokeStyle = '#b8b8b8';
        ctx.stroke();
        ctx.closePath();

        //画中心点
        ctx.beginPath();
        ctx.arc(250, 250, 5, 0, 2*Math.PI);
        ctx.lineWidth = 10;
        ctx.strokeStyle = 'brown';
        ctx.stroke();
        ctx.closePath();

        //画刻度（分钟）
        for(var i=0; i<60; i++){
            ctx.beginPath();
            ctx.save(); // 保存原来的画布，意思是创建一个新的画布
            ctx.translate(250, 250); // 重置新画布的0,0点为原来画布的中心点
            ctx.rotate(6*i*Math.PI/180); //以新画布的0,0点为轴，旋转新的画布
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'blue';
            ctx.moveTo(195, 0); //根据新画布，找线段的起始点
            ctx.lineTo(185, 0); //根据新画布，找线段的起始点
            ctx.stroke(); //画，画的时候是画到原来的画布上。
            ctx.restore(); //回到原来的作图环境，删除新创建的画布
            ctx.closePath();
        }
        //画刻度(小时刻度)
        for(var i=0; i<12; i++){
            ctx.beginPath();
            ctx.save(); // 保存原来的画布，意思是创建一个新的画布
            ctx.translate(250, 250); // 重置新画布的0,0点为原来画布的中心点
            ctx.rotate(30*i*Math.PI/180); //以新画布的0,0点为轴，旋转新的画布
            ctx.lineWidth = 8;
            ctx.strokeStyle = 'blue';
            ctx.moveTo(195, 0); //根据新画布，找线段的起始点
            ctx.lineTo(175, 0); //根据新画布，找线段的起始点
            ctx.stroke(); //画，画的时候是画到原来的画布上。
            ctx.restore(); //回到原来的作图环境，删除新创建的画布
            ctx.closePath();
        }
        //画刻度(四个大点)
        for(var i=0; i<4; i++){
            ctx.beginPath();
            ctx.save(); // 保存原来的画布，意思是创建一个新的画布
            ctx.translate(250, 250); // 重置新画布的0,0点为原来画布的中心点
            ctx.rotate(90*i*Math.PI/180); //以新画布的0,0点为轴，旋转新的画布
            ctx.lineWidth = 12;
            ctx.strokeStyle = '#ff2d2a';
            ctx.moveTo(195, 0); //根据新画布，找线段的起始点
            ctx.lineTo(175, 0); //根据新画布，找线段的起始点
            ctx.stroke(); //画，画的时候是画到原来的画布上。
            ctx.restore(); //回到原来的作图环境，删除新创建的画布
            ctx.closePath();
        }
        //获取当前的时间
        var d = new Date();
        var second = d.getSeconds(); // 秒
        var minute = d.getMinutes() + second/60; // 分
        var hour = d.getHours() + minute/60; // 小时
        //console.log(hour);

        //画时针
        ctx.beginPath();
        ctx.save(); // 保存原来的画布，意思是创建一个新的画布
        ctx.translate(250, 250); // 重置新画布的0,0点为原来画布的中心点
        ctx.rotate((hour*30 - 90)*Math.PI/180); //以新画布的0,0点为轴，旋转新的画布
        ctx.lineWidth = 12;
        ctx.strokeStyle = '#edc87e';
        ctx.moveTo(-20, 0); //根据新画布，找线段的起始点
        ctx.lineTo(105, 0); //根据新画布，找线段的起始点
        ctx.stroke(); //画，画的时候是画到原来的画布上。
        ctx.restore(); //回到原来的作图环境，删除新创建的画布
        ctx.closePath();
        //画分针
        ctx.beginPath();
        ctx.save(); // 保存原来的画布，意思是创建一个新的画布
        ctx.translate(250, 250); // 重置新画布的0,0点为原来画布的中心点
        ctx.rotate((minute * 6 - 90)*Math.PI/180); //以新画布的0,0点为轴，旋转新的画布
        ctx.lineWidth = 8;
        ctx.strokeStyle = '#edc87e';
        ctx.moveTo(-20, 0); //根据新画布，找线段的起始点
        ctx.lineTo(135, 0); //根据新画布，找线段的起始点
        ctx.stroke(); //画，画的时候是画到原来的画布上。
        ctx.restore(); //回到原来的作图环境，删除新创建的画布
        ctx.closePath();
        //画秒针
        ctx.beginPath();
        ctx.save(); // 保存原来的画布，意思是创建一个新的画布
        ctx.translate(250, 250); // 重置新画布的0,0点为原来画布的中心点
        ctx.rotate((second * 6 - 90)*Math.PI/180); //以新画布的0,0点为轴，旋转新的画布
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'red';
        ctx.moveTo(-20, 0); //根据新画布，找线段的起始点
        ctx.lineTo(175, 0); //根据新画布，找线段的起始点
        ctx.stroke(); //画，画的时候是画到原来的画布上。
        ctx.restore(); //回到原来的作图环境，删除新创建的画布
        ctx.closePath();
        //画一个螺丝
        ctx.beginPath();
        ctx.arc(250,250, 3, 0, 2*Math.PI);
        ctx.lineWidth = 6;
        ctx.strokeStyle = 'black';
        ctx.stroke();
        ctx.closePath();
    }
    //页面加载完毕，首先先调用一个clock
    clock();
    setInterval(clock, 1000);

</script>

</body>
</html>
代码-JS之使用canvas画时钟

猜你喜欢
