canvas 画一个小时钟

Posted 2020-10-07 小芹菜的琴

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas 画一个小时钟相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas id="mycanvas" height="1000" width="1000"></canvas>
</body>
<script>
    //save和restore方法
    //restore只能回复到save之后，如果在save前已经调用过其他操作画布的方法，是不能通过restore还原的
    //调用了restore方法将画布恢复,但是刚才时针已经被绘制在屏幕上，此时不会再受到画布的影响
     //要对restore和save相当的了解
    var c = document.getElementById("mycanvas");
    //console.log(c);
    var ctx = c.getContext("2d");
    //console.log(ctx);
    c.width = window.innerWidth;
    c.height = window.innerHeight;
    var width=ctx.canvas.width;  //获取当前canvas的宽高
    var height=ctx.canvas.height;
    console.log(width, height);
    function rads(x) {
        return Math.PI*x/180;
    }
    //console.log(rads(360));
    /*先画一个圆圈圈*/
    function arcPlot(c,x,y,r) {
          c.save();
          c.translate(x,y);
          c.beginPath();
          c.arc(0,0,r,0,rads(360));
          c.lineWidth = ‘5px‘;
          c.strokeStyle = ‘red‘;
          c.stroke();
    }
    /*画时钟*///因为有旋转的操作,为了不影响后面的分钟秒钟画法,必须回复到最初始的状态,所以用save和restore.
    function hour(h,m) {
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.rotate(2*Math.PI/12*(h-3)+2*Math.PI/12/60*m);
        ctx.lineTo(40,0);
        ctx.strokeStyle = "blue";
        ctx.stroke();
        ctx.restore();
    }
    /*画分钟*/
    function minute(m) {
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.rotate(2*Math.PI/60*(m-15));
        ctx.lineTo(60,0);
        ctx.strokeStyle = "green";
        ctx.stroke();
        ctx.restore();
    }
    /*画秒钟*/
    function second(s) {
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.rotate(2*Math.PI/60*(s-15));
        //console.log(2*Math.PI/60*(s-15));
        ctx.lineTo(80,0);
        ctx.strokeStyle = "orange";
        ctx.stroke();
        ctx.restore();

        //console.log(seconds);
    }
    /*开始画刻度*/
     function plotLine() {
         for (var i = 0; i < 60; i++) {
             ctx.beginPath();
             if (i % 5 == 0) {
                 ctx.moveTo(80, 0);
                 ctx.lineTo(100, 0);
                 ctx.lineWidth = "4px";
             }else{
                 ctx.moveTo(90, 0);
                 ctx.lineTo(100, 0);
                 ctx.lineWidth = "3px";
             }
             ctx.rotate(rads(6));
             ctx.strokeStyle = "black";
             ctx.stroke();
         }
     }
   /*如何使时钟动起来*/
   function draw() {
       //debugger;
       ctx.clearRect(-500,-500,2000,2000); //每秒清除一次矩形
       ctx.save();    //这个save的位置很重要,放错了,就得不到我们想要的结果
       //console.log(window.innerWidth, window.innerHeight);
       var date=new Date();
       var h=date.getHours();
       var m=date.getMinutes();
       var s=date.getSeconds();
       arcPlot(ctx,500,500,100);
       plotLine();
       hour(h,m);
       minute(m);
       second(s);
       ctx.restore();
   }
    //定时器
    setInterval(draw, 1000);
    draw(); //先执行一次，不然页面会卡一下。
</script>
</html>

以上是关于canvas 画一个小时钟的主要内容，如果未能解决你的问题，请参考以下文章