canvas樱花落下飞舞飘落动画效果代码-html代码-BFW代码库

canvas樱花落下飞舞飘落动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas樱花落下飞舞飘落动画效果代码

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

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

<head>

  <meta charset="UTF-8">

  
  
<style>
html, body {
  width: 100%;
  height: 100%;
  background-color: #1a1a1a;
}
</style>

</head>

<body>
  <canvas></canvas>

  
      <script >
const canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');

const TOTAL = 85;
const petalArray = [];

const petalImg = new Image();
petalImg.src = '//repo.bfw.wiki/bfwrepo/icon/619ca39b3ad4b.png';
petalImg.addEventListener('load', () => {
  for (let i = 0; i < TOTAL; i++) {
    petalArray.push(new Petal());
  }
  render();
});

function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  petalArray.forEach(petal => petal.animate());
  window.requestAnimationFrame(render);
}

window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
});

let mouseX = 0;
function touchHandler(e) {
  mouseX = (e.clientX || e.touches[0].clientX) / window.innerWidth;
}
window.addEventListener('mouse.........完整代码请登录后点击上方下载按钮下载查看