使用HTML写一个烟花代码

作者：weixin_40725706 | 2024-02-15 14:56:03

踩

html代码烟火背景

为了使用HTML写一个烟花效果，您可以使用以下代码：


<!DOCTYPE html>
<html>
<head>
<style>
canvas {
  display: block;
  background: black;
}
</style>
</head>
<body>
 
<canvas id="myCanvas" width="400" height="400"></canvas>
 
<script>
//获取canvas元素
var canvas = document.getElementById("myCanvas");
//获取绘图上下文
var ctx = canvas.getContext("2d");
 
var colors = ["red", "orange", "yellow", "green", "blue", "purple"];
 
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
 
  //画随机的烟花
  for (var i = 0; i < 100; i++) {
    var x = Math.random() * canvas.width;
    var y = Math.random() * canvas.height;
    var radius = Math.random() * 20 + 10;
    var color = colors[Math.floor(Math.random() * colors.length)];
 
    drawFirework(x, y, radius, color);
  }
 
  //重复执行动画
  requestAnimationFrame(draw);
}
 
function drawFirework(x, y, radius, color) {
  //画圆
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI);
  ctx.fillStyle = color;
  ctx.fill();
}
 
draw();
</script>
 
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

这个代码将会在一个黑色的画布上绘制100个随机的烟花，每个烟花都有随机的颜色和半径。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/85146