帮我写一个超炫酷的烟花代码html动画,主题是情人节,女朋友姓名叫方梦婕,烟花中带有名字,展示代码并生成html文件,最好能播放一下预览效果,一定要炫酷!!!
时间: 2023-02-26 07:09:35 浏览: 67
<html>
<head>
<title>方梦婕的情人节烟花</title>
</head>
<body> <h1>方梦婕的情人节烟花</h1> <canvas id="fireworks" width="400" height="400"></canvas> <script>
var c = document.getElementById("fireworks");
var ctx = c.getContext("2d");
var W = c.width;
var H = c.height; function random(min,max){
return Math.random()*(max-min)+min;
} var particles = [];
var particle_count = 100; for(var i = 0; i < particle_count; i++){
particles.push(new particle());
} function particle(){
this.x = W/2;
this.y = H; this.vx = random(-3,3);
this.vy = random(-10,-20); this.gravity = 0.3; this.radius = 5; this.draw = function(){
ctx.fillStyle = "rgba(255,255,255,0.8)";
ctx.beginPath();
ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,false);
ctx.fill();
} this.update = function(){
this.x += this.vx;
this.y += this.vy; this.vy += this.gravity; ctx.font = "20px Georgia";
ctx.fillStyle = "rgba(255,255,255,1)";
ctx.fillText("方梦婕", this.x, this.y);
}
} function loop(){
//清除画布
ctx.fillStyle = "rgba(0,0,0,0.2)";
ctx.fillRect(0,0,W,H); for(var i = 0; i < particles.length; i++){
var p = particles[i];
p.draw();
p.update();
} requestAnimationFrame(loop);
} loop();
</script></body>
</html>
阅读全文