1500字范文 > 【Canvas】js用canvas绘制一个钟表时钟动画效果

【Canvas】js用canvas绘制一个钟表时钟动画效果

时间：2020-03-30 21:36:16

学习JavaScript的看过来，有没有兴趣用Canvas画图呢，可以画很多有趣的事物，自由发挥想象，收获多多哦，旋转角度绘图这个重点掌握到了吗，这里有一个例子，如何用canvas画钟表时钟动图效果，接下来开始讲，边学边做。

1. 设计页面

首先，做好一个页面，开始写布局，页面源代码如下，看起来很简单吧

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>Ballet Clock</title><style>.clock{display: inherit;width: 70vw;height: 70vw;margin: auto;position: relative;margin-top: 10vw;}.clock img{position: absolute;left: 0;top: 0;width: 100%;height: 100%;}</style></head><body><div><div class="clock"><img id="clock"/><img id="hour"/><img id="minute"/><img id="second"/></div></div><script>//引入模块import BalletClock from './ballet_clock.js';window.onload=()=>{//加载脚本...}</script></body></html>

2. 加载脚本

接下来，页面的加载脚本像这样写的，代码如下，应该看得明白吧

const {clock,hour,minute,second } = ((args)=>{let e={};args.forEach(a=>e[a]=document.getElementById(a));return e;})('clock,hour,minute,second'.split(','));//创建一个模块对象let bc = new BalletClock();bc.start({bgImg:clock,hourImg:hour,minuteImg:minute,secondImg:second//...传入模块参数},window)

3. 实现模块

发现了吗，有个引用的模块ballet_clock.js文件是没有的，需要自己去写一个，这时候要复杂一点，代码并不多

1. 初始化

先实现初始化的逻辑方法init()，代码如下，是绘制一个钟表图，很简单吧

export default class BalletClock{constructor(){}#init(config,window){const {document } = window;const {bgImg, hourImg, minuteImg, secondImg } = config;//这里创建一个画布设置好宽高与图片元素益智let canvas = document.createElement('canvas');canvas.width=bgImg.width;canvas.height=canvas.width;//获取画布上下文对象（封装的可操作方法集合）let ctx = canvas.getContext('2d');const {width, height } = ctx.canvas;//表盘中心点let center = {x: width/2,y: height/2,r: width/2};//画表盘ctx.fillStyle=config.bgColor;ctx.arc(center.x,center.y,center.r,0,Math.PI*2);ctx.fill();//画刻度ctx.strokeStyle=config.foreColor;ctx.fillStyle=config.foreColor;ctx.textAlign='center';ctx.textBaseline='middle';ctx.font=`${config.fontSize}px sans-serif`;let r = center.r-config.fontSize;//旋转中心角度，将分布在不同角度位置的小时数画出来for(let a=0,hour=0; a<360; a+=30){let angle = (a-90)/180*Math.PI;let x = Math.cos(angle)*r;let y = Math.sin(angle)*r;ctx.fillText(hour==0?'12':hour.toString(),x+center.x,y+center.y);hour++;}bgImg.src=canvas.toDataURL();//画时针最后设置到图片元素钟ctx.lineCap='round';ctx.lineWidth=config.fontSize/2;ctx.clearRect(0,0,width,height);ctx.beginPath();ctx.moveTo(center.x,center.y);ctx.lineTo(center.x,center.y*0.5);ctx.stroke();ctx.lineWidth=1;ctx.beginPath();ctx.arc(center.x,center.y,config.fontSize,0,Math.PI*2);ctx.fill();hourImg.src=canvas.toDataURL();//画分针最后设置到图片元素钟ctx.lineWidth=config.fontSize/4;ctx.clearRect(0,0,width,height);ctx.beginPath();ctx.moveTo(center.x,center.y);ctx.lineTo(center.x,center.y*0.2);ctx.stroke();minuteImg.src=canvas.toDataURL();//画秒针最后设置到图片元素钟ctx.strokeStyle='#f85';ctx.lineWidth=config.fontSize/6;ctx.clearRect(0,0,width,height);ctx.beginPath();ctx.moveTo(center.x,center.y);ctx.lineTo(center.x,center.y*0.1);ctx.stroke();secondImg.src=canvas.toDataURL();}start(config,window){//这里实现开始动画逻辑...}}

💡关于绘图中的角度如何定，看上面代码中用到了相关函数是Math.cos()和Math.cos()，其用法类似于在初中数学的“勾股定理”，如还不清楚，就要复习一下数学了，要理解透彻哦，再讲讲如下代码：
let angle = (a-90)/180*Math.PI;
let x = Math.cos(angle)*r;
let y = Math.sin(angle)*r;
其中a才是角度，angle是弧度，r是圆的半径，这样可以计算出x，y在圆边上的哪个位置，圆中心点是**(0,0)**哈~这样好理解的

2. 开始动画

接着实现动画的逻辑方法start()，代码如下，能看懂最好

export default class YinAndYangTaiChiDiagram{constructor(){}#init = (config,window) => {//初始化，绘制钟表...}//这里实现开始动画逻辑start(config,window){const {bgImg, hourImg, minuteImg, secondImg } = config;this.#init(Object.assign({fontSize:18,bgColor:'#000',foreColor:'#fff',},config),window);//更新显示的逻辑因调用多次故写在一个函数中const updateAnimation = ()=>{let date = new Date();//定义一个时分秒的数据let d = {hour: date.getHours()%12,minute: date.getMinutes(),second: date.getSeconds()};//求秒针的角度let angle = d.second/60*360;secondImg.style.transform=`rotate(${angle}deg)`;//求分针的角度angle = d.minute/60*360;minuteImg.style.transform=`rotate(${angle}deg)`;//求时针的角度angle = d.hour/12*360+d.minute/60*30;hourImg.style.transform=`rotate(${angle}deg)`;//考虑处理性能调用此处可避免没必要的更新window.requestAnimationFrame(()=>{//延迟更新每一秒就更新setTimeout(()=>updateAnimation(),1000)});};//开始更新updateAnimation();}}