短视频app开发，实现一个朴实的Canvas时钟效果

短视频app开发，实现一个朴实的Canvas时钟效果的相关代码

1. 设置基本的标签与样式：

 

1

<div class="clock"><br>      <canvas width="300" height="300" id="canvas"></canvas><br>    </div><br>      * {<br>        margin: 0;<br>        padding: 0;<br>        box-sizing: border-box;<br>      }<br>      body {<br>        height: 100vh;<br>        display: flex;<br>        justify-content: center;<br>        align-items: center;<br>        rgb(204, 204, 204);<br>      }<br>      .clock {<br>        width: 300px;<br>        height: 300px;<br>        background-color: rgb(15, 15, 15);<br>        border-radius: 50px;<br>      }

 

 

2. 开始js代码实现，下面为了易于理解，所以一个功能封装一个函数：

 

1	var canvas = document.getElementById("canvas");<br>  var ctx = canvas.getContext("2d");

 

3. 先绘制钟的整体白色底盘：

 

1	同时为了后期将旋转点为.clock的中心的，所以将translate偏移一半的距离。<br>function drawPanel() {<br>        ctx.translate(150, 150);<br>        // 开始绘制<br>        ctx.beginPath();<br>        // 画一个圆<br>        ctx.arc(0, 0, 130, 0, 2 * Math.PI);<br>        ctx.fillStyle = "white";<br>        ctx.fill();<br>      }

 

4.绘制时钟的12位数字：

 

 

1

可知，一个圆上它的x坐标为：R * cos（它的角度）， y坐标为：R*sin（它的角度）。同时，因为Math.cos（）与Math.sin（）里是计算弧度的，所以要转换。公式：弧度 = 角度 * π / 180<br>function hourNum() {<br>        // 存放12个数字<br>        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];<br>        ctx.beginPath();<br>        // 数字的基本样式<br>        ctx.font = "30px fangsong";<br>        ctx.textAlign = "center";<br>        ctx.textBaseline = "middle";<br>        ctx.fillStyle = "black";<br>        for (var i = 0; i < arr.length; i++) {<br>          ctx.fillText(<br>            arr[i],<br>            108 * Math.cos(((i * 30 - 60) * Math.PI) / 180),<br>            108 * Math.sin(((i * 30 - 60) * Math.PI) / 180)<br>          );<br>        }<br>      }

 

5. 绘制时钟中心的圆点：

一个灰圆覆盖一个稍大的黑圆。

 

 

1	function centerDot() {<br>        ctx.beginPath();<br>        ctx.arc(0, 0, 8, 0, 2 * Math.PI);<br>        ctx.fill();<br>        ctx.beginPath();<br>        ctx.fillStyle = "gray";<br>        ctx.arc(0, 0, 5, 0, 2 * Math.PI);<br>        ctx.fill();<br>      }

 

6.绘制时针：

假设参数 hours 与 minutes 为传入的当前的时间的小时数与分钟数。

 

1

function hourHand(hours, minutes) {<br>        // 应该旋转的角度，默认时钟为指向12点方向。<br>        var radius =<br>          ((2 * Math.PI) / 12) * hours + (((1 / 6) * Math.PI) / 60) * minutes;<br>       // 保存当前状态，为了旋转后能回到当初状态。<br>        ctx.save();<br>        ctx.beginPath();<br>        // 针的宽度<br>        ctx.lineWidth = 5;<br>        // 针头为圆角<br>        ctx.lineCap = "round";<br>        ctx.strokeStyle = "black";<br>        // 旋转<br>        ctx.rotate(radius);<br>        // 画一条线表示时钟<br>        ctx.moveTo(0, 0);<br>        ctx.lineTo(0, -50);<br>        ctx.stroke();<br>        // 回到保存的状态<br>        ctx.restore();<br>      }

 

7. 同理，绘制分针：

 

1

function minuteHand(minutes) {<br>        2 * Math.PI;<br>        var radius = ((2 * Math.PI) / 60) * minutes;<br>        ctx.save();<br>        ctx.beginPath();<br>        ctx.lineWidth = 3;<br>        ctx.lineCap = "round";<br>        ctx.strokeStyle = "black";<br>        ctx.rotate(radius);<br>        ctx.moveTo(0, 0);<br>        ctx.lineTo(0, -70);<br>        ctx.stroke();<br>        ctx.restore();<br>      }

 

8. 同理，绘制秒针：

 

1

function secondHand(seconds) {<br>        var radius = ((2 * Math.PI) / 60) * seconds;<br>        ctx.save();<br>        ctx.beginPath();<br>        ctx.lineWidth = 1;<br>        ctx.lineCap = "round";<br>        ctx.strokeStyle = "red";<br>        ctx.rotate(radius);<br>        ctx.moveTo(0, 0);<br>        ctx.lineTo(0, -90);<br>        ctx.stroke();<br>        ctx.restore();<br>      }

 

9. 封装一个函数获取当前时间：

同时函数内部调用全部绘制的函数。实现绘制一个完整的时钟。

 

1

function update() {<br>        var time = new Date();<br>        var hours = time.getHours();<br>        var minutes = time.getMinutes();<br>        var seconds = time.getSeconds();<br>        // 保存canvas状态，因为绘制底盘时它偏移了<br>        ctx.save();<br>        drawPanel();<br>        hourNum();<br>        secondHand(seconds);<br>        minuteHand(minutes);<br>        hourHand(hours, minutes);<br>        centerDot();<br>         // 恢复canvas状态<br>        ctx.restore();<br>      }<br>      update();

 

10. 开启定时器，时钟运转：

 

 

1	setInterval(() => {<br>    ctx.clearRect(0, 0, canvas.width, canvas.height);<br>    update();<br>  }, 1000);

 

以上就是 短视频app开发，实现一个朴实的Canvas时钟效果的相关代码，更多内容欢迎关注之后的文章