类似红包雨坠落效果
要做功能只要监听屏幕有没有被点击就行这样实现比较简单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
#canvas {
/*background-color: black;*/
}
</style>
<body>
<canvas id="canvas" width="1000" height="900" style="border: 1px solid red;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d');
var width = canvas.width
var height = canvas.height
var ArrowImg = new Image()
ArrowImg.src = // 图片 最好base64格式
class Arrow {
constructor() {
this.vx = this.randomInt(0, width)
this.vy = 1
this.speed = this.randomInt(10, 15)
this.height = this.randomInt(80, 100)
this.width = this.randomInt(80, 100)