利用画布canvas实现钟表动态效果

jQuery 专栏收录该内容
4 篇文章 0 订阅

在这里插入图片描述

利用画布实现钟表动态效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        window.onload=function(){
           
          function clock(){
            var canvas=document.getElementById("canvas");
           var cx=canvas.getContext("2d");
           //表盘
           cx.fillStyle='green';
           cx.beginPath();
           cx.arc(250,250,200,0,Math.PI*2);
           cx.closePath();
           cx.fill();
               //时刻度
               cx.strokeStyle="black";
           cx.lineWidth=2;
           for(var i=0;i<12;i++){
               cx.save();
               cx.translate(250,250);//移动圆心位置
               cx.rotate(i*Math.PI/6);
               cx.beginPath();
               cx.moveTo(0,-180);
               cx.lineTo(0,-200);
               cx.closePath();
               cx.stroke();

               //数字
               cx.restore();
               cx.font='16px blod';
               cx.fillStyle="black";
               cx.save();
               cx.translate(250,250);
               cx.rotate(i*Math.PI/6);
               cx.rotate(Math.PI/6);
               cx.fillText(i+1,-5,-220);
               cx.restore();
           }
           //分刻度
           cx.strokeStyle="black";
           for(var i=0;i<60;i++){
               cx.save();
               cx.translate(250,250);//移动圆心位置
               cx.rotate(i*Math.PI/30);
               cx.beginPath();
               cx.moveTo(0,-190);
               cx.lineTo(0,-200);
               cx.closePath();
               cx.stroke();
               cx.restore();
           }
            //绘制时针
            cx.strokeStyle="black";
            var today=new Date();
            var hour=today.getHours();
            var min=today.getMinutes();
            var sec=today.getSeconds();
            hour=hour+min/60;
            cx.lineWidth=5;
            cx.save();
            cx.translate(250,250);
            cx.rotate(hour*(Math.PI/6));
            cx.beginPath();
            cx.moveTo(0,5);
            cx.lineTo(0,-110);
            cx.closePath();
            cx.stroke();
            cx.restore();
           //绘制分针
           cx.strokeStyle="black";
            cx.lineWidth=3;
            cx.save();
            cx.translate(250,250);
            cx.rotate(min*(Math.PI/30));
            cx.beginPath();
            cx.moveTo(0,8);
            cx.lineTo(0,-150);
            cx.closePath();
            cx.stroke();
            cx.restore();
           //绘制秒针
            cx.lineWidth=1;
            cx.strokeStyle="red";
            cx.save();
            cx.translate(250,250);
            cx.rotate(sec*(Math.PI/30));
            cx.beginPath();
            cx.moveTo(0,10);
            cx.lineTo(0,-170);
            cx.closePath();
            cx.stroke();
            cx.restore();
            //绘制交界处
            cx.save();
            cx.fillStyle="#ccc";
            cx.strokeStyle="red";
            cx.translate(250,250);
            cx.beginPath();
            cx.arc(0,0,5,0,Math.PI*2);
            cx.closePath();
            cx.fill();
            cx.stroke();
            cx.restore();
             setTimeout(clock,1000);
          }
          clock();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="600px" height="600px" style="background-color: #ccc;"></canvas>
</body>
</html>
  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值