学习JavaScript编程，会用Canvas画图吗，学会它，能画很多有趣的事物，可自由发挥想象，会发现图形学的美，收获很多，这里有一个例子，如何用canvas画漩涡螺旋图动图效果，接下来开始讲，边学边做。
文章目录
- 1. 设计页面
- 2. 加载脚本
- 3. 实现模块
- 4. 运行效果
1. 设计页面
首先，做好一个页面，开始写布局，页面源代码如下，看起来很简单吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>漩涡螺旋行图 Vortex 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 VortexDiagram from './vortex_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 vd = new VortexDiagram();
//更新滑块的显示数据
const showSpeed = (value)=>{
speed1.innerText = `${value}周/3s`;
vd.speed=value*360;//调整速度
};
//当滑块滑动改变时，更新显示
range1.onchange = (e) => {
const { value } = e.target;
showSpeed(value);
};
showSpeed(1);
//调用对象的开始动画
vd.start({
img:img1,
//...设置参数
},window);
3. 实现模块
发现了吗，有个引用的模块vortex_diagram.js文件是没有的，需要自己去写一个，这时候要复杂一点，代码不会太多
先实现初始化的逻辑方法init()，代码如下
export default class YinAndYangTaiChiDiagram{
speed = 360;//自转初速度
constructor(){
}
//这里实现初始化，先传入所需配置，会返回一个绘制好的螺旋图，图像数据是base64格式的
#init = (config,window) => {
const { document } = window;
const size = config.size;//图像大小
let canv1 = document.createElement('canvas');
canv1.width = size;
canv1.height = size;
const ctx = canv1.getContext('2d');
//中心点
let center = {
x: size*0.5,
y: size*0.5,
r: size*0.5,
};
//比如说，是一片叶子所占的角度
let angle = config.angle;
//小圆半径
let r = size*0.25;
//开始绘图 第一个圆
ctx.beginPath();
ctx.arc(Math.cos(0)*r + center.x,Math.sin(0)*r + center.y,r,0,Math.PI*2);
ctx.fill();
//余弦函数cosA：表示在一个直角三角形中，∠A（非直角）的邻边与三角形的斜边的比
let x = Math.cos(angle/180*Math.PI)*r + center.x;
//正弦函数sinA：表示在一个直角三角形中，∠A（非直角）的对边与三角形的斜边的比
let y = Math.sin(angle/180*Math.PI)*r + center.y;
ctx.beginPath();
ctx.arc(x,y,r,0,Math.PI*2);
ctx.save();
ctx.clip();
ctx.clearRect(x-r,y-r,r*2,r*2);
ctx.restore();
//比如说，一片叶子 绘制好了 要导出图片
let img = new Image();
img.onload = () => {
//将图片绕中心点旋转，转到360°为止，旋转一下就绘制一下
for(let index=angle*2; index<360; index+=angle*2){
ctx.save();
ctx.translate(center.r,center.r);
ctx.rotate(index/180*Math.PI);
ctx.translate(-center.r,-center.r);
ctx.drawImage(img,0,0,size,size);
ctx.restore();
}
//螺旋图就这样绘制完了 可以导出图片
let img2 = new Image();
img2.onload = () => {
//看着还不像吧，导出前，顺便裁剪一下，把不要的边沿部分去掉
ctx.clearRect(0,0,size,size);
ctx.beginPath();
ctx.arc(center.x,center.y,center.r*0.94,0,Math.PI*2);
ctx.clip();
ctx.drawImage(img2,0,0,size,size);
config.success(canv1.toDataURL())
};
//想反转，就翻转一下螺旋图
if(config.isReverse){
ctx.translate(size, 0);
ctx.scale(-1, 1);
}
img2.src = canv1.toDataURL();
};
img.src = canv1.toDataURL();
}
//开始动画
start(config,window){
const img = config.img;
//在开始动画的时候调用一下初始化方法
this.#init({
//...
size:img.width,
},window);
//省略更多...
}
}
💡 上面提到了初中数学中的知识“勾股定理”，忘记了的同学建议先复习一下呢，再回来看就能看懂了，
- 余弦函数cosA：表示在一个直角三角形中，∠A（非直角）的邻边与三角形的斜边的比
- 正弦函数sinA：表示在一个直角三角形中，∠A（非直角）的对边与三角形的斜边的比
接着实现动画的逻辑方法start()，代码如下，能看懂最好
export default class YinAndYangTaiChiDiagram{
speed = 360;
constructor(){
}
#init = (size,window) => {
//初始化，返回图像数据
}
//这里实现开始动画逻辑
start(config,window){
const img = config.img;
this.#init(Object.assign({
isReverse:config.isReverse || true,
angle:config.angle || 30,
size:img.width,
success:(res)=>img.setAttribute('src',res),
},config),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();
}
}
4. 运行效果
最后，打开浏览器运行该网页，没问题的话，就能看到期待的漩涡螺旋动画效果了，效果图如下
💡 建议亲自上机测试，看到的真实效果是与上面动图不一样的，试试滑动滑块，调节旋转速度，速度变化了，会看到不一样的图案哦
🔈漩涡螺旋图动起来是不是很神奇呢，据说观察它具有神奇的催眠功效！看漩涡中心，就不怕眼花，催眠功效比较显著，嘿嘿， 还是看过之后，是否会产生困意呢
![[附源码]SSM计算机毕业设计小说网站的设计与实现1JAVA](https://img-blog.csdnimg.cn/85d210796dd94afea3ed69cb7f26b79a.png)
![[附源码]计算机毕业设计Springboot电影推荐网站](https://img-blog.csdnimg.cn/8026578bb9134949b53c2d715edb08e5.png)
