<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5 Canvas带爆破效果的雨滴下落动画</title>
</head>
<body>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
"use strict";
var _Math = Math;
var _random = _Math.random;
var atan2 = _Math.atan2;
var cos = _Math.cos;
var sin = _Math.sin;
var hypot = _Math.hypot;
var max = 200;
var canvas = document.createElement("canvas");
var $ = canvas.getContext('2d');
var body = document.body;
var particles = [];
body.style.backgroundColor = "black";
body.style.overflow = "hidden";
body.appendChild(canvas);
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;
var point = {
x: width / 2,
y: height / 2
};
var hue = 0;
function Particle() {};
Particle.prototype = {
init: function init() {
this.hue = hue;
this.alpha = 0;
this.size = this.random(1, 5);
this.x = this.random(0, width);
this.y = this.random(0, height);
this.velocity = this.size * .5;
this.changed = null;
this.changedFrame = 0;
this.maxChangedFrames = 50;
return this;
},
draw: function draw() {
$.strokeStyle = "hsla(" + this.hue + ", 100%, 50%, " + this.alpha + ")";
$.beginPath();
$.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
$.stroke();
this.update();
},
update: function update() {
if (this.changed) {
this.alpha *= .92;
this.size += 2;
this.changedFrame++;
if (this.changedFrame > this.maxChangedFrames) {
this.reset();
}
} else if (this.distance(point.x, point.y) < 50) {
this.changed = true;
} else {
var dx = point.x - this.x;
var dy = point.y - this.y;
var angle = atan2(dy, dx);
this.alpha += .01;
this.x += this.velocity * cos(angle);
this.y += this.velocity * sin(angle);
this.velocity += .02;
}
},
reset: function reset() {
this.init();
},
distance: function distance(x, y) {
return hypot(x - this.x, y - this.y);
},
random: function random(min, max) {
return _random() * (max - min) + min;
}
};
function animate() {
$.fillStyle = "rgba(0,0,0, .2)";
$.fillRect(0, 0, width, height);
particles.forEach(function(p) {
p.draw();
});
hue += .3;
window.requestAnimationFrame(animate);
}
function touches(e) {
point.x = e.touches ? e.touches[0].clientX : e.clientX;
point.y = e.touches ? e.touches[0].clientY : e.clientY;
}
function setup() {
for (var i = 0; i < max; i++) {
setTimeout(function() {
var p = new Particle().init();
particles.push(p);
}, i * 10);
}
canvas.addEventListener("mousemove", touches);
canvas.addEventListener("touchmove", touches);
canvas.addEventListener("mouseleave", function() {
point = {
x: width / 2,
y: height / 2
};
});
window.addEventListener("resize", function() {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
point = {
x: width / 2,
y: height / 2
};
});
animate();
}
setup();
</script>
</body>
</html>
html5 Canvas实现可响应鼠标移动带爆破效果的雨滴下落动画源码.zip
版权申诉
67 浏览量
2022-11-03
23:36:35
上传
评论
收藏 34KB ZIP 举报
html5 Canvas实现可响应鼠标移动带爆破效果的雨滴下落动画源码.zip （2个子文件） 
132692071122731918 
index.html 4KB js 
jquery-1.11.1.min.js 94KB资源评论
毕业_设计
- 粉丝: 1921
- 资源: 1万+
最新资源
- 126641091882064LSPatch.apk
- 5G网络基础培训课件.zip
- 2024-spring-HIT-CS-大作业
- yolo目标检测项目实验
- downloadFile-1.hc
- C++课程设计：基于Qt的航班信息管理系统
- ADS7822UVerilog驱动，前面传的有点问题
- 基于python的高性能爬虫程序，使用了多线程+缓存+xpath实现的，这里以彼-岸图库为例，实现，仅用于学习交流
- 中分辨率成像光谱仪（MODIS）烧毁面积产品信息MODIS-C6-BA-User-Guide-1.2.pdf
- Screenshot_20240427_172613_com.huawei.browser.jpg
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
