canvas爱心表白线条循环动画效果代码-html代码-BFW代码库

canvas爱心表白线条循环动画效果代码

代码语言：html

所属分类：表白

代码描述：canvas爱心表白线条循环动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    canvas {  display: block;  margin: 0 auto;}
</style>
</head>

<body>
<canvas></canvas>

    <script >
        let canvas = document.querySelector('canvas'),
	width = 300,
	height = 300,
	ctx = canvas.getContext('2d'),
	pSystemSize = 30,
	deform = {a:4, s:0.4, min:-200, max:200, dir:1},
	repaint = 'rgba(255,255,255,.1)';

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

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

const ParticleSystem = function(num){
	this.colour = '#f00';
	this.numParticles = num;
	this.allParticles = [];
	this.x = width * .5;
	this.y = height * .5;
	this.generate();
}
ParticleSystem.prototype.generate = function(){
	for(let i=0; i<this.numParticles; i++){
		let vo = {};
		vo.degrees = (360 / this.numParticles) * i * PI180;
		vo.parent = this;
		vo.scalar = 2 + (6 / this.numParticles) * i;
		vo.size = 2 + (3.5 / this.numParticles) * i;
		vo.speed = .01 + (.05 / this.numParticles) * (i * .5);
		vo.x = width / 2;
		vo.y = height / 2;
		vo.vx = 0;
		vo.vy = 0;
		this.allParticles.push(new Particle(v.........完整代码请登录后点击上方下载按钮下载查看