canvas 绘制转动的钟表

痛定思痛。 2023-02-25 02:14 4阅读 0赞

<canvas id="skyCanvas" width="600" height="600" style="background: #000;"></canvas>
    <script> var canvas = document.querySelector("#skyCanvas"); var brush = canvas.getContext("2d"); // 绘制静态时钟 clock(); // 使用定时器让表针动起来 setInterval(clock, 1000); function clock() { // 去除拖影，使得每次渲染前清空画布 brush.clearRect(0, 0, 600, 600); // 得到时分秒，Date对象 var date = new Date(); var hour = date.getHours(); var newHour = hour > 12 ? (hour - 12) : hour;// 返回24小时制，但是表只有12个指针，所以需要转换成12小时制 var minute = date.getMinutes(); var second = date.getSeconds(); // 绘制圆形表盘 brush.beginPath(); brush.arc(300, 300, 250, 0, Math.PI * 2, false);//false是顺时针，true是逆时针，但对于圆来讲，顺时针或逆时针来绘制都OK brush.strokeStyle = "skyblue"; brush.lineWidth = "5"; brush.stroke(); brush.closePath(); // 绘制时针的刻度 brush.beginPath(); brush.lineWidth = "3"; brush.strokeStyle = "yellow"; // 循环实现时针的12个刻度 for (var i = 1; i <= 12; i++) { brush.save(); brush.translate(300, 300);//改变圆心 brush.rotate(Math.PI / 180 * 30 * i);//每一次旋转30度 brush.moveTo(0, -245);//点在圆心上面 brush.lineTo(0, -230); brush.stroke(); brush.restore();//画一个归零一个 } brush.closePath(); // 分针刻度 // can.beginPath() // for (var i = 1; i <= 60; i++) { // can.save() // // 改变圆心 // can.translate(300, 300) // can.rotate(Math.PI / 180 * 6 * i) // can.moveTo(0, -245) // can.lineTo(0, -235) // can.lineWidth = "3" // can.strokeStyle = "red"; // can.stroke() // can.restore() // } // can.closePath() // 绘制时针 pointer(30, newHour, 0, 20, 0, -120, "5", "skyblue"); // 绘制分针 pointer(6, minute, 0, 20, 0, -160, "3", "pink"); // 绘制秒针 pointer(6, second, 0, 20, 0, -180, "1", "yellow"); // 绘制秒针上靠近圆心的圆形 pointerCircle(6, second, 0, 0, 10, "skyblue", "yellow"); // 绘制秒针上远离圆心的圆形 pointerCircle(6, second, 0, -146, 10, "skyblue", "yellow"); } // 绘制时针、分针、秒针，还有转动的角度 function pointer(distance, time, mstart, mend, lstart, lend, linew, strokes) { brush.beginPath(); brush.save(); brush.translate(300, 300);//改变圆心 brush.rotate(Math.PI / 180 * distance * time);//按获取的系统的小时走，走了几个小时，就重新绘制多少度的时针 brush.moveTo(mstart, mend);//因为指针的不是在圆心其起始，露出了一个小头 brush.lineTo(lstart, lend); brush.lineWidth = linew; brush.strokeStyle = strokes; brush.stroke(); brush.restore(); brush.closePath(); } // 绘制时针上的两个圆圈 function pointerCircle(distance, time, xstart, yend, radius, fills, strokes) { brush.beginPath(); brush.save(); brush.translate(300, 300); brush.rotate(Math.PI / 180 * distance * time); brush.arc(xstart, yend, radius, 0, Math.PI * 2, true);//x,y,r,,角度.... brush.fillStyle = fills; brush.strokeStyle = strokes; brush.fill(); brush.stroke(); brush.restore(); brush.closePath(); } </script>

![在这里插入图片描述][20200710091411343.gif]

[20200710091411343.gif]: /images/20230209/4c9ac8856ae6467eb714421692752bfe.png