用canvas和js画了个钟表，跟大家分享一下

最新推荐文章于 2022-11-29 20:00:00 发布

安静嘚一颗心

最新推荐文章于 2022-11-29 20:00:00 发布

阅读量1.1k

点赞数 1

分类专栏： canvas 文章标签： canvas 钟表

本文链接：https://blog.csdn.net/weixin_35783350/article/details/52603845

版权

canvas 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<pre name="code" class="javascript">(function () {
var mycanvas=document.getElementById("mycanvas");
var otex=mycanvas.getContext("2d");
function time() {
    otex.clearRect(0,0,500,500);
    //画大圆
    otex.beginPath();
    otex.arc(250,250,200,0,2*Math.PI);
    otex.strokeStyle="#abcdef";
    otex.lineWidth=10;
    otex.closePath();
    otex.stroke();

    //秒针
    otex.strokeStyle="grey";
    otex.lineWidth=5;
    for(var i=0;i<60;i++){
        otex.save();
        otex.beginPath();
        otex.translate(250,250);
        otex.rotate(i*6*Math.PI/180);
        otex.moveTo(0,-195);
        otex.lineTo(0,-180);
        otex.closePath();
        otex.stroke();
        otex.restore();
    }


    //画时针针
    otex.strokeStyle="blue";
    otex.lineWidth=10;

    for(var i=0;i<12;i++){
        otex.save();//记得使用
        otex.beginPath();
        otex.translate(250,250);
        otex.rotate(i*30*Math.PI/180);
        otex.moveTo(0,-175);
        otex.lineTo(0,-195);
        otex.closePath();
        otex.stroke();
        otex.restore();//记得使用
    }

    var now=new Date();
    var h=now.getHours();
    var m=now.getMinutes();
    var s=now.getSeconds();

    //计算小时
    otex.save();//记得使用
    otex.beginPath();
    otex.strokeStyle="blue";
    otex.lineWidth=5;
    otex.translate(250,250);
    otex.rotate((h+m/60)*30*Math.PI/180);
    otex.moveTo(0,10);
    otex.lineTo(0,-125);
    otex.closePath();
    otex.stroke();
    otex.restore();//记得使用

    //分
    otex.save();//记得使用
    otex.beginPath();
    otex.strokeStyle="red";
    otex.lineWidth=4;
    otex.translate(250,250);
    otex.rotate((m+s/60)*6*Math.PI/180);
    otex.moveTo(0,10);
    otex.lineTo(0,-165);
    otex.closePath();
    otex.stroke();
    otex.restore();//记得使用

    //秒
    otex.save();//记得使用
    otex.beginPath();
    otex.strokeStyle="red";
    otex.lineWidth=4;
    otex.translate(250,250);
    otex.rotate(s*6*Math.PI/180);
    otex.moveTo(0,10);
    otex.lineTo(0,-185);
    otex.closePath();
    otex.stroke();
    otex.restore();//记得使用
}
    time();
    setInterval(time,1000)
})();

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>钟表</title></head><style> *{margin: 0;padding: 0;}</style><body> <canvas id="mycanvas" width="500" height="600" style=" position: relative;left:0;right:0;margin:0 auto"> </canvas><script src="main.js"></script></body>