This time I will show you how to make crumb fireworks with a black background and special effects using canvas. How to make crumb fireworks with a black background and special effects using canvas. What are the precautions?. Here is a practical case. Let’s take a look. take a look.
var canvas = document.getElementById("cas");var ocas = document.createElement("canvas");var octx = ocas.getContext("2d");var ctx = canvas.getContext("2d");
ocas.width = canvas.width = window.innerWidth;
ocas.height = canvas.height = window.innerHeight;var bigbooms = [];window.onload = function () {
initAnimate()
}function initAnimate() {
drawBg();
lastTime = new Date();
animate();
}var lastTime;function animate() {
ctx.save();
ctx.fillStyle = "rgba(0,5,24,0.1)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.restore(); var newTime = new Date(); if (newTime - lastTime > 500 + (window.innerHeight - 767) / 2) { var random = Math.random() * 100 > 2 ? true : false; var x = getRandom(canvas.width / 5, canvas.width * 4 / 5); var y = getRandom(50, 200); if (random) { var bigboom = new Boom(getRandom(canvas.width / 3, canvas.width * 2 / 3), 2, "#FFF", { x: x, y: y
});
bigbooms.push(bigboom)
} else { var bigboom = new Boom(getRandom(canvas.width / 3, canvas.width * 2 / 3), 2, "#FFF", { x: canvas.width / 2, y: 200
}, document.querySelectorAll(".shape")[parseInt(getRandom(0, document.querySelectorAll( ".shape").length))]);
bigbooms.push(bigboom)
}
lastTime = newTime;
}
stars.foreach(function () { this.paint();
})
drawMoon();
bigbooms.foreach(function (index) { var that = this; if (!this.dead) { this._move(); this._drawLight();
} else { this.booms.foreach(function (index) { if (!this.dead) { this.moveTo(index);
} else if (index === that.booms.length - 1) {
bigbooms[bigbooms.indexOf(that)] = null;
}
})
}
});
raf(animate);
}function drawMoon() { var moon = document.getElementById("moon"); var centerX = canvas.width - 200,
centerY = 100,
width = 80; if (moon.complete) {
ctx.drawImage(moon, centerX, centerY, width, width)
} else {
moon.onload = function () {
ctx.drawImage(moon, centerX, centerY, width, width)
}
} var index = 0; for (var i = 0; i < 10; i++) {
ctx.save();
ctx.beginPath();
ctx.arc(centerX + width / 2, centerY + width / 2, width / 2 + index, 0, 2 * Math.PI);
ctx.fillStyle = "rgba(240,219,120,0.005)";
index += 2;
ctx.fill();
ctx.restore();
}
}Array.prototype.foreach = function (callback) { for (var i = 0; i < this.length; i++) { if (this[i] !== null) callback.apply(this[i], [i])
}
}var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60);
};
canvas.onclick = function () { var x = event.clientX; var y = event.clientY; var bigboom = new Boom(getRandom(canvas.width / 3, canvas.width * 2 / 3), 2, "#FFF", { x: x, y: y
});
bigbooms.push(bigboom)
}var Boom = function (x, r, c, boomArea, shape) { this.booms = []; this.x = x; this.y = (canvas.height + r); this.r = r; this.c = c; this.shape = shape || false; this.boomArea = boomArea; this.theta = 0; this.dead = false; this.ba = parseInt(getRandom(80, 200));
}
Boom.prototype = { _paint: function () {
ctx.save();
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
ctx.fillStyle = this.c;
ctx.fill();
ctx.restore();
}, _move: function () { var dx = this.boomArea.x - this.x,
dy = this.boomArea.y - this.y; this.x = this.x + dx * 0.01; this.y = this.y + dy * 0.01; if (Math.abs(dx) <= this.ba && Math.abs(dy) <= this.ba) { if (this.shape) { this._shapBoom();
} else this._boom(); this.dead = true;
} else { this._paint();
}
}, _drawLight: function () {
ctx.save();
ctx.fillStyle = "rgba(255,228,150,0.3)";
ctx.beginPath();
ctx.arc(this.x, this.y, this.r + 3 * Math.random() + 1, 0, 2 * Math.PI);
ctx.fill();
ctx.restore();
}, _boom: function () { var fragNum = getRandom(30, 200); var style = getRandom(0, 10) >= 5 ? 1 : 2; var color; if (style === 1) {
color = { a: parseInt(getRandom(128, 255)), b: parseInt(getRandom(128, 255)), c: parseInt(getRandom(128, 255))
}
} var fanwei = parseInt(getRandom(300, 400)); for (var i = 0; i < fragNum; i++) { if (style === 2) {
color = { a: parseInt(getRandom(128, 255)), b: parseInt(getRandom(128, 255)), c: parseInt(getRandom(128, 255))
}
} var a = getRandom(-Math.PI, Math.PI); var x = getRandom(0, fanwei) * Math.cos(a) + this.x; var y = getRandom(0, fanwei) * Math.sin(a) + this.y; var radius = getRandom(0, 2) var frag = new Frag(this.x, this.y, radius, color, x, y); this.booms.push(frag);
}
}, _shapBoom: function () { var that = this;
putValue(ocas, octx, this.shape, 5, function (dots) { var dx = canvas.width / 2 - that.x; var dy = canvas.height / 2 - that.y; for (var i = 0; i < dots.length; i++) {
color = { a: dots[i].a, b: dots[i].b, c: dots[i].c
} var x = dots[i].x; var y = dots[i].y; var radius = 1; var frag = new Frag(that.x, that.y, radius, color, x - dx, y - dy);
that.booms.push(frag);
}
})
}
}function putValue(canvas, context, ele, dr, callback) {
context.clearRect(0, 0, canvas.width, canvas.height); var img = new Image(); if (ele.innerHTML.indexOf("img") >= 0) {
img.src = ele.
getElementsByTagName
("img")[0].src;
imgload(img, function () {
context.drawImage(img, canvas.width / 2 - img.width / 2, canvas.height / 2 - img.width / 2);
dots = getimgData(canvas, context, dr);
callback(dots);
})
} else { var text = ele.innerHTML;
context.save(); var fontSize = 200;
context.font = fontSize + "px 宋体 bold";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillStyle = "rgba(" + parseInt(getRandom(128, 255)) + "," + parseInt(getRandom(128, 255)) + "," + parseInt(getRandom(128, 255)) + " , 1)";
context.fillText(text, canvas.width / 2, canvas.height / 2);
context.restore();
dots = getimgData(canvas, context, dr);
callback(dots);
}
}function imgload(img, callback) { if (img.complete) {
callback.call(img);
} else {
img.onload = function () {
callback.call(this);
}
}
}function getimgData(canvas, context, dr) { var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
context.clearRect(0, 0, canvas.width, canvas.height); var dots = []; for (var x = 0; x < imgData.width; x += dr) { for (var y = 0; y < imgData.height; y += dr) { var i = (y * imgData.width + x) * 4; if (imgData.data[i + 3] > 128) { var dot = { x: x, y: y, a: imgData.data[i], b: imgData.data[i + 1], c: imgData.data[i + 2]
};
dots.push(dot);
}
}
} return dots;
}function getRandom(a, b) { return Math.random() * (b - a) + a;
}var maxRadius = 1,
stars = [];function drawBg() { for (var i = 0; i < 100; i++) { var r = Math.random() * maxRadius; var x = Math.random() * canvas.width; var y = Math.random() * 2 * canvas.height - canvas.height; var star = new Star(x, y, r);
stars.push(star);
star.paint()
}
}var Star = function (x, y, r) { this.x = x; this.y = y; this.r = r;
}
Star.prototype = { paint: function () {
ctx.save();
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
ctx.fillStyle = "rgba(255,255,255," + this.r + ")";
ctx.fill();
ctx.restore();
}
}var focallength = 250;var Frag = function (centerX, centerY, radius, color, tx, ty) { this.tx = tx; this.ty = ty; this.x = centerX; this.y = centerY; this.dead = false; this.centerX = centerX; this.centerY = centerY; this.radius = radius; this.color = color;
}
Frag.prototype = { paint: function () {
ctx.save();
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
ctx.fillStyle = "rgba(" + this.color.a + "," + this.color.b + "," + this.color.c + ",1)";
ctx.fill()
ctx.restore();
}, moveTo: function (index) { this.ty = this.ty + 0.3; var dx = this.tx - this.x,
dy = this.ty - this.y; this.x = Math.abs(dx) < 0.1 ? this.tx : (this.x + dx * 0.1); this.y = Math.abs(dy) < 0.1 ? this.ty : (this.y + dy * 0.1); if (dx === 0 && Math.abs(dy) <= 80) { this.dead = true;
} this.paint();
}
}Copy after login
I believe you have mastered it after reading the case in this article Method, for more exciting information, please pay attention to other related articles on the php Chinese website!
The above is the detailed content of How to make black background with special effects debris fireworks in canvas. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
