利用HTML5实现Canvas鼠标跟随光标花环特效



6 21 8



特效描述:利用HTML5实现 Canvas 鼠标跟随 光标花环特效,利用HTML5实现Canvas鼠标跟随光标花环特效

代码结构

1. HTML代码

<canvas></canvas>
<script>
"use strict";
class Head {
	constructor () {
		this.x = 0.0;
		this.y = 0.0;
    this.radius = 0.0;
    this.direction = 0.0;
    this.dDir = 0.0;
    this.rightOrLeft = false;
    this.shooted = false;
    this.color = 0;
	}
	shoot (x, y, direction) {
		this.shooted = true;
		this.x = x;
		this.y = y;
		this.direction = direction;
		this.dDir = Math.random();
		this.radius = Math.random() * 20 + 5;
		this.rightOrLeft = Math.random() < .5;
		this.color = `hsl(${Math.floor(Math.random() * 90) - (Math.random() > 0.33 ? 30 : 160)}, 80%, 60%)`;
	}
	anim() {
		if (!this.shooted) {
			pointer.next = this;
			return;
		}
		this.x += this.radius * Math.cos( this.direction );
		this.y += this.radius * Math.sin( this.direction );
		ctx.beginPath();
		ctx.arc(this.x, this.y, this.radius * 0.5, 0, 2 * Math.PI);
		ctx.fillStyle = this.color;
		ctx.fill();
		ctx.stroke();
		if( this.rightOrLeft ) this.direction -= this.dDir;
		else this.direction += this.dDir;;
		this.radius -= .4;
		if( this.radius <= 0 ) this.shooted = false;
	}
}
const canvas = {
	init() {
		this.elem = document.querySelector("canvas");
		this.resize();
		window.addEventListener("resize", () => this.resize(), false);
		return this.elem.getContext("2d");
	},
	resize() {
		this.width = this.elem.width = this.elem.offsetWidth;
		this.height = this.elem.height = this.elem.offsetHeight;
	}
};
const pointer = {
	x: 0,
	y: 0,
	xb: 0,
	yb: 0,
	next: null,
	frame: 0,
	move(e, touch) {
		const pointer = touch ? e.targetTouches[0] : e;
		this.x = pointer.clientX;
		this.y = pointer.clientY;
		this.shoot(this.x, this.y);
	},
	shoot(x, y) {
		if (!this.next) {
			this.next = new Head();
			heads.push(this.next);
		}
		this.frame++;
		if (!(this.frame % 3)) {
			ctx.fillStyle = "rgba(8, 8, 8, 0.05)";
			ctx.fillRect(0, 0, canvas.width, canvas.height);
		}
		this.next.shoot(x, y, Math.atan2(y - this.yb, x - this.xb));
		this.next = null;
		this.xb = x;
		this.yb = y;
	},
	init(canvas) {
		canvas.elem.addEventListener("mousemove", e => this.move(e, false), false);
		canvas.elem.addEventListener("touchmove", e => this.move(e, true), false);
	}
};
const ctx = canvas.init();
pointer.init(canvas);
const heads = [];
const run = () => {
	requestAnimationFrame(run);
	for (const head of heads) head.anim();
}
for (let a = 0; a < 2 * Math.PI; a += 0.1) {
	pointer.shoot(
		canvas.width * 0.5 + Math.cos(a) * canvas.width * 0.25,
		canvas.height * 0.5 + Math.sin(a) * canvas.height * 0.25
	);
}
run();
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
<p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源:<a href="http://www.51qianduan.com//" target="_blank">站长素材</a></p>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 h5光标动画 html5光标动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到