canvas实现蓝天白云下树木随风摆动动画效果代码-html代码-BFW代码库

canvas实现蓝天白云下树木随风摆动动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现蓝天白云下树木随风摆动动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
body,html{
  background: #000;
  margin: 0;
  height: 100vh;
  overflow: hidden;
}
#c:focus{
  outline: none;
}
#c{
  background:#000;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>

  
  
</head>

<body translate="no">
  <canvas id="c" tabindex="0"></canvas>
  
      <script  >
c = document.querySelector('#c');
c.width = 1920;
c.height = 1080;
x = c.getContext('2d');
C = Math.cos;
S = Math.sin;
t = 0;
T = Math.tan;

rsz = window.onresize = () => {
  setTimeout(() => {
    if (document.body.clientWidth > document.body.clientHeight * 1.77777778) {
      c.style.height = '100vh';
      setTimeout(() => c.style.width = c.clientHeight * 1.77777778 + 'px', 0);
    } else {
      c.style.width = '100vw';
      setTimeout(() => c.style.height = c.clientWidth / 1.77777778 + 'px', 0);
    }
  }, 0);
};
rsz();

async function Draw() {

  if (!t) {
    cloud = new Image();
    cloud.src = '//repo.bfw.wiki/bfwrepo/image/5edc746d6bfd5.png';
  }
  b = .6;
  g = x.createLinearGradient(0, 0, 0, c.height * b);
  g[l = 'addColorStop'](0, '#6af');
  g[l](1, '#f8ffff');
  x.fillStyle = g;
  x.fillRect(0, 0, c.width, c.height * b);

  g = x.createLinearGradient(0, c.height * b, 0, c.height);
  g[l](0, '#210');
  g[l](.5, '#330');
  g[l](1, '#061');
  x.fillStyle = g;
  x.fillRect(0, c.height * b, c.width, c.height * (1 - b));

  s.........完整代码请登录后点击上方下载按钮下载查看