学习JavaScript编程，会用Canvas画图吗，学会它，能画很多有趣的事物，可自由发挥想象，会发现图形学的美，收获很多，这里有一个例子，如何用canvas画漩涡螺旋图动图效果，接下来开始讲，边学边做。

文章目录

• 1. 设计页面
• 2. 加载脚本
• 3. 实现模块
• 4. 运行效果

1. 设计页面

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

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. 运行效果

最后，打开浏览器运行该网页，没问题的话，就能看到期待的漩涡螺旋动画效果了，效果图如下

💡 建议亲自上机测试，看到的真实效果是与上面动图不一样的，试试滑动滑块，调节旋转速度，速度变化了，会看到不一样的图案哦

🔈漩涡螺旋图动起来是不是很神奇呢，据说观察它具有神奇的催眠功效！看漩涡中心，就不怕眼花，催眠功效比较显著，嘿嘿， 还是看过之后，是否会产生困意呢