canvas 时钟案例

canvas 时钟

示意图

canvas 时钟案例

步骤

  1. 外层空心圆盘lineWidth=14、半径140
  2. 画刻度,长度20,宽度8,外层空心圆盘与刻度之间距离20
  3. 分针刻度60个,每个6度,时针刻度12个,每个30度,
  4. 画时针,圆心外溢出80,收20
  5. 画分针,宽度10,圆心外溢112,收28
  6. 画秒针,宽度6,圆心外溢83,收30,颜色D40000
    6.1 画圆心
    6.2 画秒针头
  7. 设置定时器,每隔1s运行一次,并且每次调用之前要对过去执行过的用clearRect(0,0,canvas.width,canvas.height)清除,每次调用之后要对更改过的坐标置为原位!!!
<html>
<head>
    <script type="application/javascript">
        function draw() {
            var canvas = document.getElementById("canvas");
            if (canvas.getContext) {

                var ctx = canvas.getContext("2d");
               setInterval(function () {
                //原点重置
                   // 清画布
                   ctx.clearRect(0,0,canvas.width,canvas.height);
                   move();
                   ctx.translate(-150,-150);

               },1000);
               function move(){
                   ctx.save();
                   //初始化
                   ctx.lineWidth=8;
                   ctx.lineCap="round";
                   ctx.strokeStyle = "black";
                   ctx.fillStyle = "#D40000";
                   ctx.beginPath();
                   //1.外层空心圆盘,使用一组save\restore做初始化
                   ctx.save();
                   ctx.strokeStyle = "#325FA2";
                   ctx.lineWidth=14;
                   //画弧开始
                   ctx.beginPath();
                   ctx.arc(150,150,140,0,Math.PI*2,true);
                   ctx.closePath();
                   //描边
                   ctx.stroke();
                   //返回之前保存过的路径状态和属性
                   ctx.restore();
                   ctx.translate(150,150);
                   //2.画刻度,长度20,宽度8,外层空心圆盘与刻度之间距离20
                   ctx.save();
                   for(let i =0;i<12;i++){
                       ctx.rotate(30*Math.PI/180);
                       ctx.beginPath();
                       ctx.moveTo(0,120);
                       ctx.lineTo(0,100);
                       //描边
                       ctx.stroke();
                   }
                   ctx.restore();
                   //3.分针刻度
                   ctx.save();
                   ctx.lineWidth=4;
                   for(let i =0;i<60;i++){
                       ctx.rotate(6*Math.PI/180);
                       //重合的不画

                       ctx.beginPath();
                       ctx.moveTo(0,120);
                       ctx.lineTo(0,117);
                       //描边
                       ctx.stroke();


                   }
                   ctx.restore();
                   //时针分针秒针
                   var date = new Date();
                   var s =date.getSeconds();
                   var m =date.getMinutes()+s/60;
                   var h =date.getHours()+m/60;
                   h = h%12;
                   console.log(h);
                   //4.时针,圆心外溢出80,收20
                   ctx.save();
                   ctx.lineWidth=14;
                   ctx.rotate(h*30*Math.PI/180);
                   ctx.beginPath();
                   ctx.moveTo(0,-80);
                   ctx.lineTo(0,20);
                   //描边
                   ctx.stroke();
                   ctx.restore();
                   //5.分针,宽度10,圆心外溢112,收28
                   ctx.save();
                   ctx.lineWidth=11;
                   ctx.rotate(m*6*Math.PI/180);
                   ctx.beginPath();
                   ctx.moveTo(0,-112);
                   ctx.lineTo(0,28);
                   //描边
                   ctx.stroke();
                   ctx.restore();
                   //6.秒针,宽度6,圆心外溢83,收30,颜色D40000
                   ctx.save();
                   ctx.rotate(s*6*Math.PI/180);
                   ctx.strokeStyle="#D40000";
                   ctx.beginPath();
                   ctx.moveTo(0,-83);
                   ctx.lineTo(0,30);
                   //描边
                   ctx.stroke();
                   //6.1.画中心圆
                   ctx.beginPath();
                   ctx.arc(0,0,10,0,360*Math.PI/180)
                   ctx.fill();
                   //6.2秒头
                   ctx.beginPath();
                   ctx.arc(0,-96,10,0,360*Math.PI/180);
                   ctx.stroke();
                   ctx.restore();
               }


            }
        }
    </script>
</head>
<body onload="draw();">
<p>clock</p>
<canvas id="canvas" width="300" height="300"></canvas>

</body>
</html>

canvas 时钟案例

上一篇:vue2中使用swiper插件制作轮播图


下一篇:pymongo 去重函数