【发布时间】：2016-03-22 13:47:44
【问题描述】：
我是画布和粒子的新手，但我正在玩它here。
我想在这里实现几件事，但我有点卡住了。
使文本在分解成粒子之前更长时间可见。因为它目前不可读。
我也想要它，以便有一个随机的粒子运动，然后形成文本，在文本形式中停留几秒钟，然后再次分裂成粒子。例如。随机粒子 > 粒子形成文本 > 随机粒子 > 清除屏幕。
除了fiddle，代码也在下面：
/**
* Init
*/
var canvas = document.getElementsByClassName('canvas')[0];
window.onresize = function () {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};
window.onresize();
var ctx = canvas.getContext('2d');
ctx.font = 'bold 50px "Arial"';
ctx.textBaseline = 'center';
ctx.fillStyle = '#fff';
var _particles = [];
var particlesLength = 0;
var currentText = "Create something beautiful";
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame;
}
/**
* Create one particle
* @param x
* @param y
*/
var createParticle = function createParticle(x, y) {
_particles.push(new Particle(x, y));
};
/**
* Check if pixel has alpha
* @param pixels
* @param i
* @returns {boolean}
*/
var checkAlpha = function checkAlpha(pixels, i) {
return pixels[i * 4 + 3] > 0;
};
/**
* Create _particles
*/
var createParticles = function createParticles() {
var textSize = ctx.measureText(currentText);
ctx.fillText(
currentText,
Math.round((canvas.width / 2) - (textSize.width / 2)),
Math.round(canvas.height / 2)
);
var imageData = ctx.getImageData(1, 1, canvas.width, canvas.height);
var pixels = imageData.data;
var dataLength = imageData.width * imageData.height;
//Loop through all pixels
for (var i = 0; i < dataLength; i++) {
var currentRow = Math.floor(i / imageData.width);
var currentColumn = i - Math.floor(i / imageData.height);
if (currentRow % 2 || currentColumn % 2) {
continue;
}
//If alpha channel is greater than 0
if (checkAlpha(pixels, i)) {
var cy = ~~(i / imageData.width);
var cx = ~~(i - (cy * imageData.width));
createParticle(cx, cy);
}
}
particlesLength = _particles.length;
};
/**
* new Point(x, y)
* @param x pointer
* @param y pointer
* @constructor
*/
var Point = function Point(x, y) {
this.set(x, y);
};
Point.prototype = {
set: function (x, y) {
x = x || 0;
y = y || x || 0;
/**
* x start pointer
* @type {*|number}
* @private
*/
this._sX = x;
/**
* y start pointer
* @type {*|number}
* @private
*/
this._sY = y;
/**
* Call reset
*/
this.reset();
},
/**
* add one point to another
* @param point
*/
add: function (point) {
this.x += point.x;
this.y += point.y;
},
/**
* multiply two points
* @param point
*/
multiply: function (point) {
this.x *= point.x;
this.y *= point.y;
},
/**
* Reset point
*/
reset: function () {
/**
* x pointer
* @type {*|number}
*/
this.x = this._sX;
/**
* y pointer
* @type {*|number}
*/
this.y = this._sY;
return this;
},
};
var FRICT = new Point(0.98);
/**
* Particle constructor
* @param x
* @param y
* @constructor
*/
var Particle = function Particle(x, y) {
this.startPos = new Point(x, y);
/**
* Movement variables
*/
this.v = new Point();
this.a = new Point();
/**
* First init reset
*/
this.reset();
};
Particle.prototype = {
/**
* Reset particle
*/
reset: function () {
this.x = this.startPos.x;
this.y = this.startPos.y;
this.life = Math.round(random() * 300);
this.isActive = true;
/**
* Movement variables
*/
this.v.reset();
this.a.reset();
},
/**
* Particle tick
*/
tick: function () {
if (!this.isActive) return;
this.physics();
this.checkLife();
this.draw();
return this.isActive;
},
/**
* Calculate life
*/
checkLife: function () {
this.life -= 1;
this.isActive = !(this.life < 1);
},
/**
* Draw particle
*/
draw: function () {
ctx.fillRect(this.x, this.y, 1, 1);
},
/**
* Calculate particle movement
*/
physics: function () {
this.a.x = (random() - 0.5) * 0.8;
this.a.y = (random() - 0.5) * 0.8;
this.v.add(this.a);
this.v.multiply(FRICT);
this.x += this.v.x;
this.y += this.v.y;
this.x = Math.round(this.x * 10) / 10;
this.y = Math.round(this.y * 10) / 10;
}
};
/**
* Start the party
*/
createParticles();
/**
* Clear canvas
*/
function clearCanvas() {
ctx.fillStyle = 'rgba(255,255,255,0.2)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
(function clearLoop() {
/**
* Do clearing
*/
clearCanvas();
/**
* next loop
*/
requestAnimationFrame(clearLoop);
})();
/**
* Main animation loop
*/
(function animLoop() {
ctx.fillStyle = '#ea541b';
var isAlive = true;
/**
* Loop _particles
*/
for (var i = 0; i < particlesLength; i++) {
/**
* If particle is active
*/
if (_particles[i].tick()) isAlive = true;
}
/**
* next loop
*/
requestAnimationFrame(animLoop);
})();
function resetParticles() {
for (var i = 0; i < particlesLength; i++) {
_particles[i].reset();
}
}
【问题讨论】：
标签： javascript jquery html canvas