Canvas波浪花环的示例代码


Posted in HTML / CSS onAugust 21, 2020

JS中的Canvas动画

几天没写博客了,今天又忙到很晚,教大家做一个波浪花环吧

Canvas波浪花环的示例代码
 

Canvas波浪花环的示例代码
 

Canvas波浪花环的示例代码

效果图如上所示:

老规矩先把代码给大家,新建一个html文档(新建一个txt文本文档,把后缀名改为“ .html
”),以记事本打开,把复制好的代码粘贴进去,“ 保存 ”,退出,双击或右键选择浏览器打开。

祝大家前端学习愉快,在今后的日子中与君共勉

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body {
		  	background: #111;
		  	padding:0;
		  	margin:0;
			overflow:hidden;
		}
	</style>
</head>
<body>
	<div id="wrapper"></div>
</body>
<script>
(function(){
	'use strict';
	let wrapper, canvas, ctx, width, height, 
	Tau=Math.PI*2, PI180=Math.PI/180,
	systems=[];

/* PlanetarySystem */
	let PlanetarySystem = function(id='pSys'){
		Object.defineProperty(this, 'id',               { value:id, writable:true} );
		Object.defineProperty(this, 'x',                { value:0, writable:true });
		Object.defineProperty(this, 'y',                { value:0, writable:true });
		Object.defineProperty(this, 'allBodies',        { value:[], writable:true });
		Object.defineProperty(this, 'allBodiesLookup',  { value:{}, writable:true });    // fast id lookup for children
		Object.defineProperty(this, 'numBodies',        { value:0, writable:true });
	}
	PlanetarySystem.prototype.addBody = function(vo) {
		vo.parentSystem = this;
		vo.parentBody = vo.parentBody === null ? this : this.allBodiesLookup[vo.parentBody];
		let body = new PlanetaryBody(vo);
		body.update();
		this.allBodies.push(body);
		this.allBodiesLookup[vo.id] = body;
		this.numBodies += 1;
	}
	PlanetarySystem.prototype.setSpeedFactor = function(value){
		let body;
		for(let i=0; i<this.numBodies; i++){
			body = this.allBodies[i];
			body.setSpeedFactor(value);
		}
	}
	PlanetarySystem.prototype.update = function(){
		let body;
		for(let i=0; i<this.numBodies; i++){
			body = this.allBodies[i];
			body.update();
		}
	}
/* PlanetaryBody */
	let PlanetaryBody = function(vo){
		Object.defineProperty(this, 'id',					{ value:vo.id, writable:true} );
		Object.defineProperty(this, 'diameter',				{ value:vo.diameter, writable:true });
		Object.defineProperty(this, 'colour',				{ value:vo.colour, writable:true });
		Object.defineProperty(this, 'x',					{ value:0, writable:true });
		Object.defineProperty(this, 'y',					{ value:0, writable:true });
		Object.defineProperty(this, 'vx',					{ value:0, writable:true });
		Object.defineProperty(this, 'vy',					{ value:0, writable:true });
		Object.defineProperty(this, 'degrees',				{ value:vo.degrees, writable:true });
		Object.defineProperty(this, 'speedBase',			{ value:vo.speed, writable:true });
		Object.defineProperty(this, 'speed',				{ value:vo.speed , writable:true });
		Object.defineProperty(this, 'orbitalRadius',		{ value:vo.orbitalRadius, writable:true });
		Object.defineProperty(this, 'parentSystem',			{ value:vo.parentSystem, writable:true });
		Object.defineProperty(this, 'parentBody',			{ value:vo.parentBody, writable:true });

		return this;
	}
	PlanetaryBody.prototype.update = function(){
		let angle = this.degrees * PI180;
		this.degrees += this.speed;
		this.vx = this.orbitalRadius * Math.cos(angle);
		this.vy = this.orbitalRadius * Math.sin(angle);
		// update position
		if(this.parentBody != null){
			this.x = this.vx + this.parentBody.x;
			this.y = this.vy + this.parentBody.y;
		}
	}

/* init() */
	function init(){
		wrapper = document.querySelector('#wrapper');
		canvas = createCanvas('canvas', width, height);
		wrapper.appendChild(canvas);
		ctx = canvas.getContext('2d');
		setupEvents();
		resizeCanvas();

		/* Define new PlanetarySystem and set values */
		let system1 = new PlanetarySystem('pSys1');
		systems.push(system1);
		system1.x = width * .5;
		system1.y = height * .5;
		system1.addBody({id:'sun', diameter:5, degrees:0, speed:0, colour:'#FDFE1D', orbitalRadius:0, parentBody:null});
		for(let loop=30, i=0; i<loop; i+=1){
			system1.addBody({	id:				'ball'+i,
								diameter:		5,
								degrees:		0,
								speed:			2 + (loop * 0.15) - (i* 0.2),
								colour:			'#FDFE1D',
								orbitalRadius:	7*(i+1),
								parentBody:		'sun'});
		}
	}
	
/* Methods */
	function createCanvas(id, w, h){
		let tCanvas = document.createElement('canvas');
		tCanvas.width = w;
		tCanvas.height = h;
		tCanvas.id = id;
		return tCanvas;
	}

	function setupEvents(){
		window.onresize = resizeCanvas;
	}
	function resizeCanvas(){
		let rect = wrapper.getBoundingClientRect();
		width = window.innerWidth;
		height = window.innerHeight - rect.top -2;
		canvas.width = width;
		canvas.height = height;
		for(let i=0; i<systems.length; i++){
			systems[i].x = width * .5;
			systems[i].y = height * .5;
		}
	}

	function update(){
		for(let loop=systems.length, i=0; i<loop; i++){
			systems[i].update();
		}
	}

	function draw(){
		let system;
		let prev = null;
		for(let i=0; i<systems.length; i++){
			system = systems[i];
			let planetaryBody;
			for(let loop=system.numBodies, j=1; j<loop; j+=1) {
				planetaryBody = system.allBodies[j];
				ctx.beginPath();
				ctx.arc(planetaryBody.x, planetaryBody.y, planetaryBody.diameter, 0, Tau, false);
				ctx.fillStyle = planetaryBody.colour;
				ctx.fill();
				if(j>1){
					ctx.strokeStyle = planetaryBody.colour;
					ctx.lineWidth = 2;
					ctx.beginPath();
					ctx.moveTo(planetaryBody.x, planetaryBody.y);
					ctx.lineTo(prev.x, prev.y);
					ctx.stroke();
				}
				prev = {x:planetaryBody.x, y:planetaryBody.y};
			}
		}
	}

	function animate(){
		ctx.fillStyle = 'rgba(0,0,0, .05)';
		ctx.fillRect(0, 0, width, height);
		update();
		draw();
		requestAnimationFrame(animate);
	}
	init();
	animate();
}());
</script>
</html>

到此这篇关于Canvas波浪花环的示例代码的文章就介绍到这了,更多相关Canvas 波浪花环内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS中的字体大小设置属性总结
May 24 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
Nov 11 HTML / CSS
css3带你实现3D转换效果
Feb 24 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 #HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 #HTML / CSS
amazeui 验证按钮扩展的实现
Aug 21 #HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 #HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 #HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 #HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 #HTML / CSS
You might like
php设计模式之观察者模式的应用详解
2013/05/21 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
基于PHP实现短信验证码发送次数限制
2020/07/11 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python3.x和Python2.x的区别介绍
2013/02/12 Python
Python字符串和文件操作常用函数分析
2015/04/08 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
DTD的含义以及作用
2014/01/26 面试题
体育专业个人的求职信范文
2013/09/21 职场文书
QA工程师岗位职责
2013/11/20 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
南京大屠杀观后感
2015/06/02 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
JavaScript的function函数详细介绍
2021/11/20 Javascript
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS
SpringBoot详解执行过程
2022/07/15 Java/Android