【Canvas】js用Canvas绘制漩涡螺旋图动画效果

最新推荐文章于 2024-06-07 09:37:07 发布

TA远方

最新推荐文章于 2024-06-07 09:37:07 发布

阅读量1.1k

点赞数

分类专栏： Canvas画布绘图文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/zs1028/article/details/128066350

版权

Canvas画布绘图专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

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

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

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

TA远方

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Canvas】js用Canvas绘制漩涡螺旋图动画效果

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

扫一扫