<!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>
<style>
.btn-group {
position: absolute;
top: 10px;
}
a {
text-decoration: none;
padding: 5px 10px;
color: white;
background: orange;
}
input {
padding: 5px 10px;
}
</style>
</head>
<body>
<canvas id="canvas">
<img src="images/dog.png" alt="" id="logo" />
</canvas>
<div class="btn-group">
<a href="javascript:useImage()" class="btn image-btn">使用图片</a>
<a href="javascript:useText(document.querySelector('.btn-group input').value)" class="btn text-btn">使用文字</a>
<input type="text" value="TECHBROOD" />
</div>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var img;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var mouseX = null,
mouseY = null;
var mouseRadius = 50;
var RAF = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
Array.prototype.forEach = function(callback) {
for (var i = 0; i < this.length; i++) {
callback.call((typeof this[i] === "object") ? this[i] : window, i, this[i]);
}
};
window.onmousemove = function(e) {
if (e.target.tagName == "CANVAS") {
mouseX = e.clientX - e.target.getBoundingClientRect().left;
mouseY = e.clientY - e.target.getBoundingClientRect().top;
} else {
mouseX = null;
mouseY = null;
}
};
var particleArray = [];
var animateArray = [];
var particleSize_x = 1;
var particleSize_y = 2;
var canvasHandle = {
init: function() {
this._reset();
this._initImageData();
this._execAnimate();
},
_reset: function() {
particleArray.length = 0;
animateArray.length = 0;
this.ite = 30;
this.start = 0;
this.end = this.start + this.ite;
},
_initImageData: function() {
this.imgx = (canvas.width - img.width) / 2;
this.imgy = (canvas.height - img.height) / 2;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, this.imgx, this.imgy, img.width, img.height);
console.log(this.imgx)
console.log(img.width)
var imgData = ctx.getImageData(this.imgx, this.imgy, img.width, img.height);
for (var x = 0; x < img.width; x += particleSize_x) {
for (var y = 0; y < img.height; y += particleSize_y) {
var i = (y * imgData.width + x) * 4;
if (imgData.data[i + 3] >= 125) {
var color = "rgba(" + imgData.data[i] + "," + imgData.data[i + 1] + "," + imgData.data[i + 2] + "," + imgData.data[i + 3] + ")";
var x_random = x + Math.random() * 20,
vx = -Math.random() * 200 + 400,
y_random = img.height / 2 - Math.random() * 40 + 20,
vy;
if (y_random < this.imgy + img.height / 2) {
vy = Math.random() * 300;
} else {
vy = -Math.random() * 300;
}
particleArray.push(
new Particle(
x_random + this.imgx,
y_random + this.imgy,
x + this.imgx,
y + this.imgy,
vx,
vy,
color
)
);
particleArray[particleArray.length - 1].drawSelf();
}
}
}
},
_execAnimate: function() {
var that = this;
var mouseSize = 10;
particleArray.sort(function(a, b) {
return a.ex - b.ex;
});
if (!this.isInit) {
this.isInit = true;
animate(function(tickTime) {
if (animateArray.length < particleArray.length) {
if (that.end > (particleArray.length - 1)) {
that.end = (particleArray.length - 1)
}
animateArray = animateArray.concat(particleArray.slice(that.start, that.end))
that.start += that.ite;
that.end += that.ite;
}
animateArray.forEach(function(i) {
this.update(tickTime);
})
})
}
}
}
var timestamp, isrunning = false;
function animate(tick) {
if (typeof tick == "function") {
var newtime = new Date();
var tickTime = timestamp ? ((newtime = new Date()) - timestamp) : 0;
ctx.clearRect(0, 0, canvas.width, canvas.height);
timestamp = newtime;
tick(tickTime);
RAF(function() {
animate(tick)
})
}
}
function Particle(x, y, ex, ey, vx, vy, color) {
this.x = x;
this.y = y;
this.ex = ex;
this.ey = ey;
this.vx = vx;
this.vy = vy;
this.a = 1500;
this.color = color;
this.width = particleSize_x;
this.height = particleSize_y;
this.stop = false;
this.static = false;
this.maxCheckTimes = 10;
this.checkLength = 5;
this.checkTimes = 0;
}
var oldColor = "";
Particle.prototype = {
constructor: Particle,
drawSelf: function() {
if (oldColor != this.color) {
ctx.fillStyle = this.color;
oldColor = this.color
}
ctx.fillRect(this.x - this.width / 2, this.y - this.height / 2, this.width, this.height);
},
update: function(tickTime) {
if (this.stop) {
this.x = this.ex;
this.y = this.ey;
} else {
tickTime = tickTime / 1000;
var cx = this.ex - this.x;
var cy = this.ey - this.y;
var angle = Math.atan(cy / cx);
var ax = Math.abs(this.a * Math.cos(angle));
ax = this.x > this.ex ? -ax : ax
var ay = Math.abs(this.a * Math.sin(angle));
ay = this.y > this.ey ? -ay : ay;
this.vx += ax * tickTime;
this.vy += ay * tickTime;
this.vx = ~~this.vx * 0.95;
this.vy = ~~this.vy * 0.95;
this.x += this.vx * tickTime;
this.y += this.vy * tickTime;
if (Math.abs(this.x - this.ex) <= this.checkLength && Math.abs(this.y - this.ey) <= this.checkLength) {
this.checkTimes++;
if (this.checkTimes >= this.maxCheckTimes) {
this.stop = true;
}
} else {
this.checkTimes = 0
}
}
this.drawSelf();
this._checkMouse();
},
_checkMouse: function() {
if (!mouseX) {
if (this.recordX) {
this.stop = false;
this.checkTimes = 0;
this.a = 1500;
this.ex = this.recordX;
this.ey = this.recordY;
this.recordX = null;
this.recordY = null;
}
return;
}
var distance = Math.sqrt(Math.pow(mouseX - this.x, 2) + Math.pow(mouseY - this.y, 2));
var angle = Math.atan((mouseY - this.y) / (mouseX - this.x));
if (distance < mouseRadius) {
this.stop = false;
HTML5 Canvas实现文本或图片的粒子化粉末化动画特效源码.zip
版权申诉
201 浏览量
2022-11-03
23:37:12
上传
评论
收藏 12KB ZIP 举报
HTML5 Canvas实现文本或图片的粒子化粉末化动画特效源码.zip （2个子文件） 
132686868521045930 images 
dog.png 8KB
index.html 9KB资源评论
易小侠
- 粉丝: 6487
- 资源: 9万+
最新资源
- 知识蒸馏-基于Pytorch通过匹配训练轨迹进行数据集蒸馏-附项目源码+流程教程-优质项目实战.zip
- 儿童节 python庆祝代码简要介绍-20240601.docx
- 知识蒸馏-基于Pytorch实现的语义分割结构化知识蒸馏算法-附项目源码+流程教程-优质项目实战.zip
- 小白物联网智能家居毕设参考STM32+ESP8266/MQTT+OneNet+UniApp
- BeanUtil.java，对象属性拷贝工具
- 糖尿病肾病检测数据集VOC+YOLO格式4122张5类别.7z
- win10/11 更新禁用/开启
- IMG_3534.CR2.cr2
- FileZilla客户端
- 删除win10/11安全中心
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
