JS利用canvas画布功能画时钟

首先来看看效果

思路

利用计时器实时完成页面数据更新，计时器间隔为1000毫秒也就是1s的时间，同时利用

canvas.width = canvas.width 来删除之前的画布数据从而达到秒针不停走的动画效果。

步骤

1.进行画布设置（准备工作，同时deg表示角度换算，在后面运算在直接输入角度即可）

bin里面的东西是时钟的位置以及半径

<style>canvas {display: block;margin: 0 auto;border: 1px solid red;}</style><canvas></canvas><script>let canvas = document.querySelector("canvas")canvas.height = 550;canvas.width = 800;let ctx = canvas.getContext("2d");let deg = Math.PI / 180let bin = {x: 400,y: 300,r: 200,}

设置画布的大体轮廓

2.进行时钟轮廓绘制

//轮廓ctx.beginPath();ctx.arc(400, 300, 200, 0, 360 * deg, false);ctx.stroke();

3.完成大刻度绘制并添加数字

通过for循环将数组arr中的数逐个放入表盘中（12个刻度瓜分圆，所以每个刻度间隔为30度）

qs.为什么第一个数为3而不是1？

是因为圆的绘制是从大概3点钟的位置开始的（如果想数组从1开始的话可以在划线的每个角度基础上减去90度）

//大刻度let arr = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]for (let i = 0; i < 12; i++) {ctx.beginPath();ctx.moveTo(bin.x + (bin.r - 20) * Math.cos(30 * i * deg), bin.y + (bin.r - 20) * Math.sin(30 * i * deg));ctx.lineTo(bin.x + bin.r * Math.cos(30 * i * deg), bin.y + bin.r * Math.sin(30 * i * deg));ctx.fillText(arr[i], bin.x + (bin.r - 30) * Math.cos(30 * i * deg), bin.y + (bin.r - 30) * Math.sin(30 * i * deg))//数字部分ctx.stroke();}

4.小刻度绘制

同样利用for循环完成（60个刻度瓜分圆，所以每个刻度间隔为6度）

 for (let i = 0; i < 60; i++) {ctx.beginPath();ctx.moveTo(bin.x + (bin.r - 10) * Math.cos(6 * i * deg), bin.y + (bin.r - 10) * Math.sin(6 * i * deg));ctx.lineTo(bin.x + bin.r * Math.cos(6 * i * deg), bin.y + bin.r * Math.sin(6 * i * deg));ctx.stroke();

5.绘制时针，分针，秒针，

 let hourL = 100;let minL = 120;let secL = 150;

6.通过本地时间获取当前的时间（不换算，直接拿来用就行了）

 //从系统获取时间time = new Date();hour = time.getHours();min = time.getMinutes();sec = time.getSeconds();

7.把时间数据换算成角度导入（时针由于12个刻度，每个刻度间隔30度；分针、秒针由于60个刻度，每个刻度间隔6度）

//秒(每次6度，因为有60个刻度分360度)ctx.beginPath();//这个可加可不加ctx.moveTo(bin.x, bin.y);ctx.lineTo(bin.x + secL * Math.cos(270 * deg + 6 * sec * deg), bin.y + secL * Math.sin(270 * deg + 6 * sec * deg));ctx.stroke();//分(每次6度，因为有60个刻度分360度)ctx.beginPath();ctx.moveTo(bin.x, bin.y);ctx.lineTo(bin.x + minL * Math.cos(270 * deg + 6 * min * deg), bin.y + minL * Math.sin(270 * deg + 6 * min * deg));ctx.stroke();//时(每次30度)ctx.beginPath();ctx.moveTo(bin.x, bin.y);ctx.lineTo(bin.x + hourL * Math.cos(270 * deg + 6 * hour * deg), bin.y + hourL * Math.sin(270 * deg + 30 * hour * deg));ctx.stroke();

8.别忘了清理画布和设置1000毫秒全局定时器（如果不设定时器挂钟不会走，如果不清理画布所有图像会随时间无限叠加）

canvas.width = canvas.width

代码完整版

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>canvas {display: block;margin: 0 auto;border: 1px solid red;}</style>
</head><body><canvas></canvas><script>let canvas = document.querySelector("canvas")canvas.height = 550;canvas.width = 800;let ctx = canvas.getContext("2d");let deg = Math.PI / 180let bin = {x: 400,y: 300,r: 200,}setInterval(() => {canvas.width = canvas.width//轮廓ctx.beginPath();ctx.arc(400, 300, 200, 0, 360 * deg, false);ctx.stroke();//刻度ctx.beginPath();//大刻度let arr = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]for (let i = 0; i < 12; i++) {ctx.beginPath();ctx.moveTo(bin.x + (bin.r - 20) * Math.cos(30 * i * deg), bin.y + (bin.r - 20) * Math.sin(30 * i * deg));ctx.lineTo(bin.x + bin.r * Math.cos(30 * i * deg), bin.y + bin.r * Math.sin(30 * i * deg));ctx.fillText(arr[i], bin.x + (bin.r - 30) * Math.cos(30 * i * deg), bin.y + (bin.r - 30) * Math.sin(30 * i * deg))//数字部分ctx.stroke();}//小刻度for (let i = 0; i < 60; i++) {ctx.beginPath();ctx.moveTo(bin.x + (bin.r - 10) * Math.cos(6 * i * deg), bin.y + (bin.r - 10) * Math.sin(6 * i * deg));ctx.lineTo(bin.x + bin.r * Math.cos(6 * i * deg), bin.y + bin.r * Math.sin(6 * i * deg));ctx.stroke();}let hourL = 100;let minL = 120;let secL = 150;//从系统获取时间time = new Date();hour = time.getHours();min = time.getMinutes();sec = time.getSeconds();//秒(每次6度，因为有60个刻度分360度)ctx.beginPath();//这个可加可不加ctx.moveTo(bin.x, bin.y);ctx.lineTo(bin.x + secL * Math.cos(270 * deg + 6 * sec * deg), bin.y + secL * Math.sin(270 * deg + 6 * sec * deg));ctx.stroke();//分(每次6度，因为有60个刻度分360度)ctx.beginPath();ctx.moveTo(bin.x, bin.y);ctx.lineTo(bin.x + minL * Math.cos(270 * deg + 6 * min * deg), bin.y + minL * Math.sin(270 * deg + 6 * min * deg));ctx.stroke();//时(每次30度)ctx.beginPath();ctx.moveTo(bin.x, bin.y);ctx.lineTo(bin.x + hourL * Math.cos(270 * deg + 6 * hour * deg), bin.y + hourL * Math.sin(270 * deg + 30 * hour * deg));ctx.stroke();}, 1000)</script><script></script></body></html>

JS利用canvas画布功能画时钟相关推荐

利用canvas画布和rotate()方法让画的图形旋转起来
上一篇讲了利用canvas画布画太极图,这一篇说的是让太极图旋转起来. **思路:**利用HTML DOM 的setInterval()方法,它会按照指定的周期来调用函数或计算表达式.再利用画布的ro ...
s时钟画布 android,Canvas画布实现自定义时钟效果
标题 *{margin:0; padding:0; list-style:none;} .box{ width: 420px; height: 420px; margin: 50px auto 0; ...
前端|利用canvas画布制作地球轨道
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 一.什么是<canvas> <canvas& ...
教你如何利用canvas画布绘制哆啦A梦
教你如何利用canvas画布绘制哆啦A梦最近一直在练习使用canvas画布标签,今天教大家如何使用canvas画布绘制哆啦A梦.如图: HTML代码: <canvas id="my_ ...
vue.js 利用canvas绘制仪表盘圆环进度条-带动画
vue.js 利用canvas绘制简易仪表盘进度条 html代码因为动画效果比较消耗性能,所以进度条单独canvas绘制 <template><div class="ci ...
Chart.js清空canvas画布 clearRect()等canvas方法擦除失败（附完整代码）
Chart.js清空canvas画布 clearRect等canvas方法擦除失败一.直接移除DOM对象方式原因方法二.完整代码 html javascript chart.js画图方法三. ...
LV2之-----canvas 画布实现自转时钟大转盘
canvas 画布运用实例:1.系统时钟 <!DOCTYPE html> <html lang="en"><head><meta char ...
html5 canvas图表,Chart.js基于Canvas画布的HTML5统计图表库 - 资源分享
Chart.js 是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.可以绘制柱状图.热点图.曲线图等,使用HTML5中的Canvas画布,支持原生的和jQuery的调用方法. 特点 6种图表 ...
js 利用canvas转换图片格式并下载图片
1.利用canvas转换格式思路很简单,就是在canvas上drawImage,然后再把canvas转换成想要的图片格式 convertImageToCanvas = (image) => { ...
利用canvas画布画哆啦A梦
简易版哆啦A梦源代码: <!DOCTYPE html> <html><head><title>哆啦A梦</title><meta ch ...

JS利用canvas画布功能画时钟

JS利用canvas画布功能画时钟相关推荐

最新文章

热门文章