挥洒笔墨舞动青春canvas鼠标舞动动画效果想象力-html代码-BFW代码库

挥洒笔墨舞动青春canvas鼠标舞动动画效果想象力

代码语言：html

所属分类：粒子

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

body {
	margin: 0;
	padding: 0;
	color: #fff;
	background-color: #000;
}

canvas {
	-webkit-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
}
</style>

</head>
<body translate="no">
<canvas></canvas>
<script>
/// Imagination by @neave

window.requestAnimationFrame =
	window.requestAnimationFrame ||
	window.webkitRequestAnimationFrame ||
	window.mozRequestAnimationFrame ||
	window.msRequestAnimationFrame ||
	function(callback) {
		setTimeout(callback, 1000 / 60);
	};

var get = document.querySelector.bind(document),
	on = document.addEventListener.bind(document),
	context,
	canvas,
	mouseX,
	mouseY,
	px,
	py,
	points = [],
	size = 0,
	red = 0,
	green = 255,
	blue = 255,
	spread,
	SPEED_X = 0.15,
	SPEED_Y = 0.15,
	MAX_LENGTH = 120,
	RED_STEP = 0.02,
	GREEN_STEP = 0.015,
	BLUE_STEP = 0.025;

function Point(x, y, dx, dy, size, color) {
	this.x = x;
	this.y = y;
	this.dx = dx;
	this.dy = dy;
	this.size = size;
	this.color = color;
}

Point.prototype.spread = function() {
	this.x += this.dx;
	this.y += this.dy;
};

function drawLines() {
	var p0,
		p1,
		p2,
		total = points.length;

	for (var i = total - 1; i > 1; i--) {
		p0 = points[i];
		p1 = points[i - 1];
		p2 = points[i - 2];

		context.beginPath();
		context.strokeStyle = p0.color;
		context.lineWidth = p0.size;
		context.globalAlpha = i / total;
		context.moveTo((p1.x + p0.x) / 2, (p1.y + p0.y) / 2);
		context.quadraticCurveTo(p1.x, p1.y, (p1.x + p2.x) / 2, (p1.y + p2.y) / 2);

		context.stroke();

		p0.spread();
	}

	points[0].spread();
	points[total - 1].spread();
}

function draw() {
	// Line movement
	var dx = (mouseX - px) * SPEED_X,
		dy = (mouseY - py) * SPEED_Y;

	// Limit the amount of movement
	if (dx < -spread) {
		dx = -spread;
	} else if (dx > spread) {
		dx = spread;
	}

	if (dy < -s.........完整代码请登录后点击上方下载按钮下载查看