js+css实现canvas田间被风吹的稻草人动画代码-html代码-BFW代码库

js+css实现canvas田间被风吹的稻草人动画代码

代码语言：html

所属分类：动画

代码描述：js+css实现canvas田间被风吹的稻草人动画代码

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

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

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

  
  
  
<style>
body {
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  height: 100dvh;
}

#grass {
  display: block;
  margin: 0 auto;
  background-color: lightblue;
  image-rendering: pixelated;
}
</style>


  
</head>

<body translate="no">
  <canvas id="grass" width="500" height="400"></canvas>
  
      <script >
const canvasElement = document.getElementById("grass");
const canvasContext = canvasElement.getContext("2d");
canvasContext.imageSmoothingEnabled = false;

let grassBlades = [];
let amplitude = 1.6;
let speed = 0.05;
let offset = 1;

const puppetImage = new Image();
puppetImage.src = '//repo.bfw.wiki/bfwrepo/icon/66fbc8818e1a5.png';

function drawBlade(
startX,
startY,
controlPointX1,
controlPointY1,
controlPointX2,
controlPointY2,
endX,
endY,
swayAmount)
{
  canvasContext.beginPath();
  canvasContext.moveTo(startX, startY);
  canvasContext.bezierCurveTo(controlPointX1, controlPointY1, controlPointX2, controlPointY2, endX, endY);
  canvasContext.strokeStyle = "green";
  canvasContext.lineWidth = 3;
  canvasContext.stroke();
}

function drawGrassScene() {
  canvasContext.clearRect(0, 0, canvasElement.width, canvasElement.height);

  canvasContext.drawImage(puppetImage, 1.........完整代码请登录后点击上方下载按钮下载查看