html：canvas画布绘图简单入门-绘制时钟-3

canvas示例系列：

html：canvas画布绘图简单入门-1
html：canvas画布绘图简单入门-2
html：canvas画布绘图简单入门-绘制时钟-3
html：canvas画布绘图简单入门-刮刮乐-4

示例10：绘制时钟

<canvas id="canvas"width="600"height="600"></canvas><script>let canvas = document.querySelector('#canvas');let ctx = canvas.getContext('2d');let width = canvas.widthlet height = canvas.height// 绘制内容区域相对画布的大小 80%let scale = 0.8;// 计算半径let radius = Math.floor(Math.min(width, height) * scale * 0.5);console.log('radius', radius);// 绘制外边框// ctx.beginPath();// ctx.strokeRect(0, 0, width, height);// ctx.closePath()// 绘制时钟刻度function drawClockScale({number = 12,strokeStyle = 'black',lineWidth = 3,lineLength = 20,}) {ctx.save();ctx.strokeStyle = strokeStyle;ctx.lineWidth = lineWidth;let rotateAngle = (360 / number);for (let i = 0; i < number; i++) {ctx.rotate((Math.PI / 180) * rotateAngle);ctx.beginPath();ctx.moveTo(radius - lineLength, 0);ctx.lineTo(radius, 0);ctx.stroke();ctx.closePath()}ctx.restore();}function drawClock() {ctx.clearRect(0, 0, width, height);ctx.save();// 将坐标轴原点移动到画布中心ctx.translate(width / 2, height / 2);// 旋转坐标轴x指向画布正上方ctx.rotate(-Math.PI / 180 * 90);// 分针和秒针的刻度drawClockScale({number: 60,strokeStyle: 'green',lineWidth: 4,lineLength: 14});// 时针刻度drawClockScale({number: 12,strokeStyle: 'red',lineWidth: 8,lineLength: 20});// 绘制指针let now = new Date();let hour = now.getHours();let minute = now.getMinutes();let second = now.getSeconds();console.log(`${hour}: ${minute}: ${second}`);// 绘制秒针ctx.save();ctx.beginPath();ctx.rotate((Math.PI / 180) * (360 / 60) * second);ctx.strokeStyle = "deepskyblue";ctx.lineWidth = 2;ctx.moveTo(-20, 0);ctx.lineTo(radius - 30, 0);ctx.stroke();ctx.closePath()ctx.restore();// 绘制分针ctx.save();ctx.rotate((Math.PI / 180) * ((360 / 60) * minute + (360 / 60 / 60) * second));ctx.beginPath();ctx.strokeStyle = "green";ctx.lineWidth = 4;ctx.moveTo(-20, 0);ctx.lineTo(radius - 40, 0);ctx.stroke();ctx.closePath()ctx.restore();// 处理成12小时制if (hour > 12) {hour = hour - 12}// 绘制时针ctx.save();ctx.beginPath();ctx.rotate((Math.PI / 180) * ((360 / 12) * hour + (360 / 12 / 60) * minute + (360 / 12 / 60 / 60) *second));ctx.strokeStyle = "red";ctx.lineWidth = 8;ctx.moveTo(-20, 0);ctx.lineTo(radius - 50, 0);ctx.stroke();ctx.closePath()ctx.restore();// 绘制圆心ctx.beginPath();ctx.fillStyle = "grey";ctx.lineWidth = 10;ctx.arc(0, 0, 10, 0, Math.PI / 180 * 360);ctx.fill();ctx.closePath()// 绘制圆ctx.beginPath();ctx.strokeStyle = "grey";ctx.lineWidth = 10;ctx.arc(0, 0, radius, 0, Math.PI / 180 * 360);ctx.stroke();ctx.closePath()ctx.restore();}// 每隔1秒重绘一次setInterval(() => {drawClock();}, 1000)</script>

需要修改坐标轴之前，最好把当前状态保存，绘制完成后再恢复

在线demo: https://mouday.github.io/front-end-demo/canvas/canvas-clock.html

html：canvas画布绘图简单入门-绘制时钟-3相关推荐

html：canvas画布绘图简单入门-画板-5
canvas示例系列: html:canvas画布绘图简单入门-1 html:canvas画布绘图简单入门-2 html:canvas画布绘图简单入门-绘制时钟-3 html:canvas画布绘图简单 ...
在canvas画布上多次绘制图形叠加的效果
如果在画布2d上下文连续绘制多次相同的图形,比如 <!DOCTYPE html> <html lang="en"> <head><meta ...
canvas画布上平铺图片绘制文本
1️⃣知识点①:如何在canvas画布上平铺图片: ⚠️知识点实现: <!DOCTYPE html> <html><head><meta charset=&q ...
H5网页Canvas画布绘图图片文字合成
一个很简单的小列子,直接贴代码,代码中都有注释,下面有demo链接. <html> <head><meta name="viewport" conte ...
JS --- canvas画布的简单使用
canvas <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是那么简单 ...
使用Canvas画布实现简单的计时器功能
使用canvas的画线工具在圆盘中不断的画线,同时需要清除掉上一次的画线,需要对canva的整个画布进行更新: 直接移动和旋转canvas的坐标轴,这样画线的长度就可以固定,且起点和终点的纵坐标始终为 ...
利用Canvas实现绘图功能（绘制五角星）
文章目录要求过程一.绘制五角星二.生成随机数三.利用循环,生成10个五角星四.完整代码存在的问题要求利用Canvas编程实现在屏幕上随机位置绘制10个随机大小(边长为20-100dp ...
前端|利用canvas画布制作地球轨道
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 一.什么是<canvas> <canvas& ...
鸿蒙应用开发之canvas画布组件介绍
canvas画布组件用于自定义绘制图形. 方法:getContext和toDataURL getContext:getContext('2d')函数用于获取2D绘图引擎,调用方法为var ctx = ...

html：canvas画布绘图简单入门-绘制时钟-3

示例10：绘制时钟

html：canvas画布绘图简单入门-绘制时钟-3相关推荐

最新文章

热门文章