canvas绘制时钟

这篇文章用于介绍html5的新标签，<canvas></canvas>

Canvas介绍

canvas是HTML5新增的元素，通过javascript脚本绘制图形。那么canvas可以用来干啥呢？

• 制作web网页游戏
• 数据可视化；即：echarts就是基于canvas进行绘制
• 广告banner的动态效果，视频的弹幕效果
• canvas还可以用来内嵌一些网页
• 手写签名
• 等…

点击进入查看canvas的系列学习

在这里我添加了一个时钟的绘制，呈现的效果如下：

这里采用的是俩个canvas的形式进行圆刻度表与指针分开的绘制；
实现代码的html的代码如下：

 <style>
   * {
       margin: 0;
       padding: 0;
   }
   h1 {
       line-height: 100px;
   }
   .clock_box {
       position: relative;
       z-index: 0;
       width: 600px;
       height: 600px;
       margin: 100px auto;
       border: 2px solid gray;
       text-align: center;
       border-radius: 10px;
   }
   #canva_cicle {
       position: absolute;
       z-index: -1;
   }
</style>
<div class="clock_box">
   <h1>canvas绘制时钟</h1>
   <canvas id="canva_cicle" width="500" height="500"></canvas>
   <canvas id="canva_line" width="500" height="500"></canvas>
</div>

javascript的方式如下：

<script type="module">
   const canvasCicle = document.getElementById('canva_cicle');
   const cicleCtx = canvasCicle.getContext('2d');
   const canvasLine = document.getElementById('canva_line');
   const lineCtx = canvasLine.getContext('2d');

   // 绘制表盘
   renderClockCicle();
   function renderClockCicle () {
       cicleCtx.save(); // 进行当前translate中心轴偏移的存储
       cicleCtx.translate(250, 250); // 当前绘制的中心到（300， 300）的坐标轴中

       cicleCtx.beginPath();
       cicleCtx.arc(0, 0, 200, 0, 2*Math.PI, false);
       cicleCtx.strokeStyle = "darkgray";
       cicleCtx.lineWidth = 10;
       cicleCtx.stroke();
       cicleCtx.closePath();

       for(let i = 0; i < 60; i++) {
           cicleCtx.rotate(Math.PI / 30); // 旋转表盘进行绘制刻度
           cicleCtx.beginPath();
           cicleCtx.moveTo(180, 0);
           cicleCtx.lineTo(190, 0); // 圆的半径是0
           cicleCtx.lineWidth = 2;
           cicleCtx.strokeStyle = "pink";
           cicleCtx.stroke();
       }
       // 绘制时钟的刻度
       for(let i = 0; i < 12; i++) {
           cicleCtx.rotate(Math.PI / 6); // 旋转表盘进行绘制刻度
           cicleCtx.beginPath();
           cicleCtx.moveTo(180, 0);
           cicleCtx.lineTo(200, 0); // 圆的半径是0
           cicleCtx.lineWidth = 10;
           cicleCtx.lineCap = 'round';
           cicleCtx.strokeStyle = "darkgray";
           cicleCtx.stroke();
       }
   }
   
   // 每隔一秒钟进行绘制
   setInterval(() => {
       renderClockLine();

   }, 1000);
   // 渲染时针
   function renderClockLine() {
       lineCtx.clearRect(0, 0, 500, 500);
       lineCtx.save(); // 进行当前translate中心轴偏移的存储
       lineCtx.translate(250, 250); // 当前绘制的中心到（300， 300）的坐标轴中
       lineCtx.rotate(-2 * Math.PI / 4); // 将表盘逆时针的选择回轴刻度是90度

       const time = new Date();
       let hoursNum = time.getHours();
       const minNum = time.getMinutes();
       const secNum = time.getSeconds();
       hoursNum = hoursNum > 12 ? (hoursNum - 12) : hoursNum;
       // console.log(hoursNum, minNum, secNum);
       lineCtx.save();
       // 绘制秒针的旋转
       lineCtx.beginPath();
       lineCtx.rotate(2 * Math.PI / 60 * secNum);
       lineCtx.moveTo(-30, 0); // 线条的开始
       lineCtx.lineTo(170, 0); // 绘制的结束
       lineCtx.lineWidth = 2;
       lineCtx.strokeStyle = 'red';
       lineCtx.stroke();
       lineCtx.closePath();

       // 进行恢复再保留的形式
       lineCtx.restore();
       lineCtx.save();

       // 绘制分针
       lineCtx.beginPath();
       lineCtx.rotate(2 * Math.PI / 60 * minNum + 2 * Math.PI / 3600 * secNum);
       lineCtx.moveTo(-20, 0);
       lineCtx.lineTo(150, 0);
       lineCtx.lineWidth = 2;
       lineCtx.strokeStyle = 'drakblue';
       lineCtx.stroke();
       lineCtx.closePath();

       // 进行恢复再保留的形式
       lineCtx.restore();
       lineCtx.save();

       // 绘制时针
       lineCtx.beginPath();
       lineCtx.rotate(2 * Math.PI / 12 * hoursNum + 2 * Math.PI / 60 / 12 * hoursNum + 2 * Math.PI / 12 / 60 /60);
       lineCtx.moveTo(-10, 0);
       lineCtx.lineTo(100, 0);
       lineCtx.lineWidth = 6;
       lineCtx.strokeStyle = 'drak';
       lineCtx.stroke();
       lineCtx.closePath();

       // 绘制指针的固定圆
       lineCtx.arc(0, 0, 10, 0, 2 * Math.PI);
       lineCtx.fillStyle = "darkgray";
       lineCtx.fill();
       lineCtx.closePath();

       // 进行将位置清除回归
       lineCtx.restore();
       lineCtx.restore();
   }
</script>