canvas实现一个实时时钟

最新推荐文章于 2022-09-23 20:52:30 发布

奢คิดถึง

最新推荐文章于 2022-09-23 20:52:30 发布

阅读量321

点赞数 1

本文链接：https://blog.csdn.net/pet_ch/article/details/109246672

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
   function loop(){
       var can = document.getElementById("canvas");
       can.width=500;
       can.height=500;
       var context = can.getContext("2d");
       context.clearRect(0,0,500,500);   //每调用一次回调函数，清除画布，重新绘图
       context.translate(250,250);   //为使旋转中心位于画布中心，将画布向右下方平移
       context.rotate(-180 * (Math.PI / 180)); //调整旋转中心方向，调整为竖直向上

       //绘制外围的圆
       context.arc(0,0,240,0,2*Math.PI,true);
       context.strokeStyle="red";
       context.stroke();

       //绘制小时
       for(var i=0;i<12;i++){
           context.beginPath();
           context.strokeStyle="black";
           context.lineWidth = 8;
           context.moveTo(0,220);
           context.lineTo(0,240);
           context.stroke();
           context.rotate(30*(Math.PI/180));
       }
       //绘制分钟
       for(var i=0;i<60;i++){
           context.beginPath();
           context.strokeStyle="black";
           context.lineWidth = 5;
           context.moveTo(0,230);
           context.lineTo(0,240);
           context.stroke();
           context.rotate(6*(Math.PI/180));
       }

       context.closePath();
       //绘制表盘中心原点
       context.beginPath();
       context.restore();
       context.fillStyle = "red";
       context.strokeStyle="red";
       context.save();
       context.arc(0,0,8,0,2*Math.PI,true);
       context.stroke();
       context.fill();

       //绘制时分秒针
       //先获取时间
       var date = new Date();
       var hour  = date.getHours();
       hour = hour>12?hour-12:hour;
       var minute = date.getMinutes();
       var second = date.getSeconds();
       /*  console.log(hour);*/


       //时针
       context.restore();
       context.strokeStyle="black";
       context.save();
       context.beginPath()
       context.lineWidth=7;
       // console.log(hour, minute, second);
       context.rotate(hour * ( Math.PI / 6) + minute * (Math.PI / 360) + second * (Math.PI / 21600));
       context.moveTo(0,0);
       context.lineTo(0,130);
       context.stroke();

       //分针
       context.restore();
       context.strokeStyle="red";
       context.save();
       context.beginPath()
       context.lineWidth=4;
       // console.log(hour, minute, second);
       context.rotate(minute * (Math.PI / 30) + second * (Math.PI / 1800));
       context.moveTo(0,0);
       context.lineTo(0,190);
       context.stroke();

       //秒针
       context.restore();
       context.strokeStyle="green";
       context.save();
       context.beginPath()
       context.lineWidth=3;
       // console.log(hour, minute, second);
       context.rotate(second * (Math.PI / 30));
       context.moveTo(0,0);
       context.lineTo(0,230);
       context.stroke();

       window.requestAnimationFrame(loop);
   }
   window.requestAnimationFrame(loop);
    //requestAnimationFrame回调函数执行次数通常是每秒60次
    // 但在大多数遵循W3C建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配

</script>
</html>

奢คิดถึง

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas实现一个实时时钟

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><canvas id="canvas"></canvas></body><script> function loop(){ var can
复制链接

扫一扫