<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FIRE WORKS</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
// 创建canvas画布
var canvas = document.getElementById('myCanvas')
var context = canvas.getContext('2d')
// canvas的宽高跟随窗口的宽高改变
function resizeCanvas() {
canvas.width = window.innerWidth
canvas.height = window.innerHeight
}
/**
* 清除canvas
* fillStyle: 画布的颜色
* fillRect: 绘制画布所在的位置以及画布的宽高
* 参数详解:(x, y, width, height)
* x:矩形左上角的x坐标
* y: 矩形左上角的y坐标
* width: 矩形的宽
* height: 矩形的高
*/
function clearCanvas() {
context.fillStyle = '#ffffff'
context.fillRect(0,0,canvas.width,canvas.height)
}
// 监听页面
window.addEventListener('resize', resizeCanvas, false)
/**
* 调用画布函数
*/
resizeCanvas();
// 鼠标按下的事件函数
function mouseDownHandler(e) {
var x = e.clientX
var y = e.clientY
fire(x,y)
}
/**
* 创建烟花
*/
var particles=[];
function createFireworks(sx,sy){
particles=[];
var hue = Math.floor(Math.random()*51)+150;
var hueVariance = 30;
var count = 100;
for(var i = 0 ;i<count;i++){
var p = {};
var angle = Math.floor(Math.random()*360);
p.radians = angle * Math.PI / 180;
p.radius = 0;
p.sx = sx;
p.sy = sy;
p.speed = (Math.random()*5)+.4;
p.size = Math.floor(Math.random()*3)+1;
p.hue = Math.floor(Math.random()*((hue+hueVariance)-(hue-hueVariance)))+(hue-hueVariance);
p.brightness = Math.floor(Math.random()*31)+50;
p.alpha = (Math.floor(Math.random()*61)+40)/100;
particles.push(p);
}
}
/**
* 开始画烟花
* sx: 点击位置距离当前body可视区域的 X 坐标
* sy: 点击位置距离当前body可视区域的 Y 坐标
*/
function drawFireworks(sx,sy) {
clearCanvas()
for(var i=0; i<particles.length; i++) {
var p = particles[i];
p.vx = p.sx+Math.cos(p.radians) * p.radius;
p.vy = p.sy+Math.sin(p.radians) * p.radius;
p.radius += 1+p.speed;
context.beginPath(); // 丢弃任何当前定义的路径,把当前的点设置成(0,0)
/**
* arc(x,y,r,sAngle,eAngle, counterclockwise):
* x: 圆中心 的x坐标
* y: 圆中心 的y坐标
* r: 圆的半径
* sAngle:起始角,以弧度计
* eAngle: 结束角, 以弧度计
* counterclockwise: 可选,false:顺时针;true:逆时针
*/
context.arc(p.vx, p.vy, p.size, 0, Math.PI*2, false);
context.closePath(); // 方法关闭一条打开的子路径
context.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+100+')';
context.fill(); // 开始填充
}
}
var rid;
function fire(x,y) {
createFireworks(x,y)
function tick() {
//tips:注意新加入的这4行代码
// context.globalCompositeOperation = 'destination-out';
// context.fillStyle = 'rgba(0,0,0,'+10/100+')';
// context.fillRect(0,0,canvas.width,canvas.height);
// context.globalCompositeOperation = 'lighter';
if (rid) {
window.clearInterval(rid)
rid = null
}
drawFireworks() // 绘制烟花
rid=setInterval(tick,30) // 每30毫秒绘制一次
}
cancelAnimationFrame(rid)
tick()
}
// 监听鼠标按下事件
document.addEventListener('mousedown', mouseDownHandler, false);
function mouseUpHandler() {
window.clearInterval(rid)
rid = null
}
// 监听鼠标按下事件
// document.addEventListener('mouseup', mouseUpHandler, false);
</script>
</body>
</html>```
烟花
最新推荐文章于 2024-01-25 17:17:30 发布