|
马上就要过春节了，大城市里依然是不准燃放烟花这种空气污染的东西的，想念小时候在自家院子里放花的快乐时光，大城市里的小伴侣们是体会不到这种快乐了。但做为前端工程师，这难不倒咱们，下面就教大众怎样用JS在网页里放烟花。
这篇文案看完，保准你在任何平台，用任何语言都能够写出来放烟花的效果
怎样实现的？
先创建一个Canvas先新建一个和网页可视区体积同样的canvas，并且经过监听表示区的resize事件，来改变canvas的体积。var canvas = document.getElementById(myCanvas);
var context = canvas.getContext(2d);
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
function clearCanvas(){
context.fillStyle = #ffffff;
context.fillRect(0,0,canvas.width, canvas.height);
}
window.addEventListener(resize, resizeCanvas, false);
resizeCanvas();
放烟花之前的练习烟花都是从一个点爆炸，伴同着区别的弧度散开，因此咱们先绘制几个小圆点，环绕着一个圆心。有点像loading的小圈圈。这其实便是烟花最起始的状态...
function mouseDownHandler(e) {
var x = e.clientX;
var y = e.clientY;
drawFireworks(x,y);
}
function drawFireworks(sx,sy) {
var count = 10;//烟花粒子数量
var radius = 10;//烟花环绕半径
for(var i = 0 ;i<count;i++){
var angle = 360/count*i;//烟花粒子角度
var radians = angle * Math.PI / 180;//烟花粒子弧
| 
发表于 2024-6-30 04:43:27
