【Canvas】js用Canvas绘制阴阳太极图动画效果

news/2024/5/2 11:30:28/文章来源:https://blog.csdn.net/zs1028/article/details/128051322

学习JavaScript是否兴趣缺缺，那就需要来一个兴趣学习，问一下有没有兴趣用Canvas画图呢，可以画很多有趣的事物，自由发挥想象，收获多多哦，这里有一个例子，如何用canvas画阴阳太极图动图效果，接下来开始讲，边学边做。

1. 设计页面

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

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>阴阳太极图 Yin and Yang Tai Chi Diagram</title><style>img{width: 300px;height: 300px;}</style></head><body><div style="padding:20px 0; text-align: center;"><div><img id="img1"></canvas></div><div style="padding-top: 20px;"><input type="range" max="360" min="1" id="range1" value="1"/><label id="speed1"></label></div></div><script type="module">//引入模块import YinAndYangTaiChiDiagram from './yin_and_yang_tai_chi_diagram.js'window.onload=()=>{//...此处省略加载脚本}</script></body>
</html>

2. 加载脚本

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

const { img1, range1, speed1 } = ((...args)=>{let e = {};args.forEach(a=>e[a]=document.getElementById(a));return e;
})('img1','range1','speed1');
//新建模块对象
let yytcd = new YinAndYangTaiChiDiagram();
//更新滑块的显示数据
const showSpeed = (value)=>{speed1.innerText = `${value}周/3s`;yytcd.speed=value*360;//调整速度
};
//当滑块滑动改变时，更新显示
range1.onchange = (e) => {const { value } = e.target;showSpeed(value);
};
showSpeed(1);
//调用对象的开始动画
yytcd.start(img1,window);

3. 实现模块

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

1. 初始化

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

export default class YinAndYangTaiChiDiagram{speed = 360;//自转初速度constructor(){}//这里实现初始化，会返回一个绘制好的太极图，图像数据是base64格式的#init = (size,window) => {const { document } = window;let canv1 = document.createElement('canvas');canv1.width = size;//图像大小canv1.height = size;const ctx = canv1.getContext('2d');//画鱼🐟ctx.arc(size*0.5,size*0.25,size*0.25,Math.PI*0.5,Math.PI*1.5,true);ctx.arc(size*0.5,size*0.5,size*0.5,Math.PI*1.5,Math.PI*0.5,true);ctx.arc(size*0.5,size*0.75,size*0.25,Math.PI*0.5,Math.PI*1.5);ctx.fill();//点睛👁ctx.beginPath();ctx.arc(size*0.5,size*0.75,size*0.06,0,Math.PI*2);ctx.fill();//再点睛👁 对面的鱼看过来看过来🐟ctx.beginPath();ctx.arc(size*0.5,size*0.25,size*0.06,0,Math.PI*2);ctx.clip();ctx.clearRect(0,0,size,size);//阴阳图☯ 就这样画出来了return canv1.toDataURL();}//开始动画start(img,window){//在开始动画的时候调用一下初始化方法img.setAttribute('src',this.#init(img.width,window));//省略更多...}
}

2. 开始动画

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

export default class YinAndYangTaiChiDiagram{speed = 360;//自转初速度constructor(){}#init = (size,window) => {//初始化，返回图像数据}//这里实现开始动画逻辑start(img,window){img.setAttribute('src',this.#init(img.width,window));	let angle = 0;//设置图片元素的样式const style = img.style;style.transition=`all 3s linear`;//3秒完成一次动画效果//更新动画的方法const updateAnimation = () => {angle+=this.speed;if(angle>Number.MAX_SAFE_INTEGER){alert("超过最大数值了！");window.location.reload();return;}style.transform=`rotate(${angle}deg)`;};//监听动画完成时的方法const listener = (event)=>{event.preventDefault();requestAnimationFrame(()=>updateAnimation());};img1.addEventListener('transitionend',listener,false);//当页面退出（或被关闭）时，移除监听动画方法window.onunload=()=>img1.removeEventListener('transitionend', listener);//最后，开始动画更新方法updateAnimation();}
}