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

    学习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 Diagramtitle>
		<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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    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);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    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);
		//省略更多...
	}
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84

    💡 上面提到了初中数学中的知识“勾股定理”，忘记了的同学建议先复习一下呢，再回来看就能看懂了，

    • 余弦函数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();
	}
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48

    4. 运行效果

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

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

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

  • 相关阅读:
    Unity中的【格式化数据】进行【系列化】和【反系列化】操作
    记录一个 Hudi HBase 依赖冲突问题及解决方案
    linux网络编程epoll内核实现代码分析
    智工教育：公务员考试这些知识点你会背了吗？
    C#中的ConcurrentExclusiveSchedulerPair类
    武汉新时标文化传媒有限公司抖音小店提高价格的商品还有人买吗？
    【SpringMVC】@RequestMapping注解
    ACMG 2.0 支持零信任网络模式
    计算机毕业设计ssm+vue基本微信小程序的好物推荐分享系统
    一年好景君须记，正是橙黄橘绿时[开学季flag]
  • 原文地址：https://blog.csdn.net/zs1028/article/details/128066350