学习JavaScript编程,会用Canvas画图吗,学会它,能画很多有趣的事物,可自由发挥想象,会发现图形学的美,收获很多,这里有一个例子,如何用canvas画漩涡螺旋图动图效果,接下来开始讲,边学边做。
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. 运行效果
最后,打开浏览器运行该网页,没问题的话,就能看到期待的漩涡螺旋动画效果了,效果图如下
💡 建议亲自上机测试,看到的真实效果是与上面动图不一样的,试试滑动滑块,调节旋转速度,速度变化了,会看到不一样的图案哦
🔈漩涡螺旋图动起来是不是很神奇呢,据说观察它具有神奇的催眠功效!看漩涡中心,就不怕眼花,催眠功效比较显著,嘿嘿, 还是看过之后,是否会产生困意呢