利用HTML5實現Canvas鼠標移動花紋特效



18 70 24



特效描述:利用HTML5實現 Canvas 鼠標移動 花紋特效,利用HTML5實現Canvas鼠標移動花紋特效

代碼結構

1. 引入JS

<script src="js/xezbab.js"></script>

2. HTML代碼

<div></div>
<script>
  window.canvasOptions = {
  	//- autoClear: true,
  	autoCompensate: false,
  	autoPushPop: true,
  	canvas: true,
  	//- centered: true,
  	width: null,
  	height: null
  };
</script>
<script>
var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}} // Idea based on "flowers" by Gerard Ferrandez: https://codepen.io/ge1doot/pen/dKaZoZ
var particles = [];
var _e = void 0;
var last = void 0;
var grad = void 0;
function setup() {
	onResize();
}
function onResize() {
	var center = Vector.center();
	grad = createRadialGradient(
	center.x, center.y, 0,
	center.x, center.y, hypot(width, height) * 0.4);
	grad.addColorStop(0.0, hsl(340, 100, 50));
	grad.addColorStop(0.3, hsl(310, 100, 50));
	grad.addColorStop(0.7, hsl(240, 100, 50));
	grad.addColorStop(1.0, hsl(210, 100, 50));
}
function draw(e) {
	_e = e;
	var center = Vector.center();
	var time = e * 0.001;
	var sTime = sin(time * 0.8);
	// push();
	// // filter(`blur(${map(sTime, -1, 1, 10, 2)}px)`);
	// filter(`blur(1px)`);
	// drawImage(canvas, 0, 0, width, height);
	// pop();
	background(hsl(0, 0, 8, map(sTime, -1, 1, 0.05, 0.2)));
	if (mouseIn) {
		last = null;
		var v = mousePos.copy().sub(mousePosPrev);
		if (v.mag() > 2) {
			var vel_ = v.limit(80);
			for (var i = 0; i < 10; i++) {
				var pos = lerp(mousePosPrev, mousePos, random());
				var vel = vel_.copy().mult(random(0.05, 0.3));
				var p = new Particle(pos, vel, e);
				particles.push(p);
			}
		}
	} else
	{
		var mn = min(width_half, height_half) * 0.45;
		var count = 4;
		var timeC = time * 3.75;
		var timeS = time * 2.5;
		for (var _i = 0; _i < count; _i++) {
			var t = _i / count * EIGHTH_PI;
			var _pos = createVector(
			cos(timeC + t),
			sin(timeS + t)).
			mult(mn).add(center);
			if (last) {
				var _vel = _pos.copy().sub(last);
				var _p = new Particle(_pos, _vel, e);
				particles.push(_p);
			}
			last = _pos.copy();
		}
	}
	particles = particles.filter(function (p) {return p.e + p.life > e;});
	beginPath();
	particles.forEach(function (p) {
		var life = (e - p.e) / p.life;
		var r = (1 - life) * 10;
		// circle(p.pos.x, p.pos.y, r);
		push();
		translate(p.pos);
		var v = p.pos.copy().sub(p.lastPos);
		var heading = v.heading();
		var mag = v.mag();
		rotate(heading);
		moveTo(0, r);
		arc(0, 0, r, HALF_PI, -HALF_PI);
		arc(mag, 0, r, -HALF_PI, HALF_PI);
		closePath();
		pop();
		p.update();
	});
	fill(grad);
}var
Particle = function () {
	function Particle(pos, vel, e) {_classCallCheck(this, Particle);
		this.pos = pos.copy();
		this.lastPos = this.pos.copy();
		this.vel = vel.copy();
		this.e = e;
		this.life = random(200, 600);
	}_createClass(Particle, [{ key: "update", value: function update()
		{
			var dir = floor(this.life + _e * 0.003) % 2 ? 1 : -1;
			var rot = dir * this.life * 0.0003;
			this.lastPos = this.pos.copy();
			this.pos.add(this.vel.mult(0.95).rotate(rot));
		} }]);return Particle;}();
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 加載動畫 h5彈窗動畫 html5彈窗動畫 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 h5按鈕動畫 html5按鈕動畫 h5光標動畫 html5光標動畫
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 浙江十一选五任五遗漏 四川快乐12助手推荐号 私家花园赚钱吗 金沙娱樂城 对麻将一点不懂 怎么学 25选7复式16投注表 秒速时时彩微信群 重庆时时玩法介绍 江苏时时彩走势图 单机麻将四人不联网 39彩票首页 七乐彩走势图机选 今天贵州11选五11选5 网络麻将赌博哪里举报 广东11选5基本 LV彩票安卓