canvas下雨动画效果-html代码-BFW代码库

canvas下雨动画效果

代码语言：html

所属分类：动画

代码描述：canvas下雨动画效果

代码标签：效果

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
html,
body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 0;
  padding: 0;
  
}

body > canvas {
  border: 1px solid black;
  background-color: transparent;
  z-index: 10;
}

body > #sky-top {
  height: 100% !important;
  width: 100% !important;
  background-color: rgb(46, 46, 46);
  position: absolute;
  z-index: 1;
  animation: lightning 20s ease-in-out infinite;
}

@keyframes lightning {
  0% {
    background-color: rgb(46, 46, 46);
  }
  6.25% {
    background-color: rgb(46, 46, 46);
  }
  8% {
    background-color: rgb(255, 255, 255);
  }
  9% {
    background-color: rgb(46, 46, 46);
  }
  11% {
    background-color: rgb(255, 255, 255);
  }
  30% {
    background-color: rgb(46, 46, 46);
  }
  100%{
    background-color: rgb(46, 46, 46);
  }
}

body > #sky-bottom {
  height: 100% !important;
  width: 100% !important;
  position: absolute;
  z-index: 2;
  background: linear-gradient(rgba(255, 255, 255, 0), rgb(120, 140, 155));
}
</style>



</head>

<body translate="no" >
  <div id="sky-top"></div>
<div id="sky-bottom"></div>
<canvas id="canvas"></canvas>

<!-- canvas fullscreen -->
<script>
  const height = document.body.offsetHeight;
  const width = document.body.offsetWidth;
  const cvs = document.getElementById('canvas');
  cvs.setAttribute("height", height);
  cvs.setAttribute("width", width);
</script>


  
  
      <script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext('2d');
const canvasHeight = canvas.height;
const canvasWidth = canvas.width;

const clearCanvas = function (x, y, height, width) {
  rectX = x || 0;
  rectY = y || 0;
  rectHeight = height || canvasHeight;
  rectWidth = width || canvasWidth;
  context.clearRect(rectX, rectY, rectWidth, rectHeight);
  context.beginPath();
};

const circle = function (x, y, radius, filled) {
  const offset = radius / 2;
  x = x - offset;
  y = y - offset;
  context.beginPath();
  context.arc(x, y, radius, 0, 2 * Math.PI);
  if (filled) {
    context.stroke();
  }
  context.strokeStyle = '#fff';
  context.closePath();
};

const createVector = function (x, y) {return { x, y };};

const vectorAddition = function (vectorA, vectorB) {
  if (typeof vectorB === 'number') {
    return { x: vectorA.x + vectorB, y: vectorA.y + vectorB };
  }
  return { x: vectorA.x + vectorB.x, y: vectorA.y + vectorB.y };
};

const vectorSubtraction = function (vectorA, vectorB) {
  if (typeof vectorB === 'number') {
    return { x: vectorA.x - vectorB, y: vectorA.y - vectorB };
  }
  return { x: vectorA.x - vectorB.x, y: vectorA.y - vectorB.y };
};

const vectorMultiplication = function (vectorA, vectorB) {
  if (typeof vectorB === 'number') {
    return { x: vectorA.x * vectorB, y: vectorA.y * vectorB };
  }
  return { x: vectorA.x * vectorB.x, y: vectorA.y * vectorB.y };
};

const vectorDivision = function (vectorA, vectorB) {
  if (typeof vectorB === 'number') {
    return { x: vectorA.x / vectorB, y: vectorA.y / vectorB };
  }
  return { x: vectorA.x / vectorB.x, y: vectorA.y / vectorB.y };
};

const getRandomFloat = function (min, max) {
  const random = Math.random() * (max - min + 1) + min;
  return random;
};

const getRandomInteger = function (min, max) {
  return Math.floor(getRandomFloat(min, max));
};

const checkRaindropCollision = function (location, radius) {
  let rain = { collided: false, location: null };
  if (location.y - canvasHeight >= radius) {
    rain.collided = true;
    .........完整代码请登录后点击上方下载按钮下载查看