canvas实现倾盆大雨动画效果代码-html代码-BFW代码库

canvas实现倾盆大雨动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现倾盆大雨动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
	background-color: lightgrey;
}

canvas {
	background: #718493;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
</style>


</head>

<body  >
  <canvas width="512" height="512"></canvas>


  
      <script  >
const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");

function randNum(min, max) {
  return Math.random() * (max - min) + min;
}

class Raindrop {
  constructor() {
    this.w = 2;
    this.h = 1;
    this.x = randNum(0 + this.w * 2, canvas.width - this.w * 2);
    this.y = randNum(-60 + this.h * 2, 0 - this.h * 2);
    this.o = randNum(0.1, 0.75);
    this.c = "white";
    this.g = randNum(1, 5);
  }
  update() {
    this.y += this.g;
  }
  draw() {
    c.save();
    this.update(.........完整代码请登录后点击上方下载按钮下载查看