canvas彩虹的心

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

let canvas = document.querySelector('canvas'),
	speedSelect = document.querySelector('#speed'),
	width = 300,
	height = 300,
	ctx = canvas.getContext('2d'),
	pSystemSize = 1000,
	deform = {a:100, s:0.4, min:-200, max:200, dir:1}; // a=4 is natural if not animated;

const mcos = Math.cos,
	  msin = Math.sin,
	  mpow = Math.pow,
	  PI180=Math.PI / 180,
	  tau = Math.PI * 2;

canvas.width = width;
canvas.height = height;
ctx.lineWidth = 1;

const Particle = function(vo){
	this.degrees = vo.degrees;
	this.parent = vo.parent;
	this.x = vo.x;
	this.y = vo.y;
	this.vx = 0;
	this.vy = 0;
	this.colour = 'hsl(' + (Math.round((this.degrees * (180/Math.PI)))) + ',100%,50%)';
}
Particle.prototype.update = function(){
	// http://mathworld.wolfram.com/HeartCurve.html
	this.vx = 16 * mpow(msin(this.degrees), 3) * deform.dir;
	this.vy = ((13 * mcos(this.degrees)) - 
			   (6 * mcos(2 * this.degrees)) - // 5
			   (2 * mcos(3 * this.degrees)) -
			   (mcos(deform.a * this.degrees))) * -1;
	
	// update position
	this.x = this.vx * this.parent.scalar + this.parent.x;
	this.y = this.vy * this.parent.scalar + this.parent.y;
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg