canvas生产线运输动画代码-html代码-BFW代码库

canvas生产线运输动画代码

代码语言：html

所属分类：动画

代码描述：canvas生产线运输动画代码

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

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

<head>
  <meta charset="UTF-8">
  
  
  
<style>
* {
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #eef2f6;
      font-family: Arial, sans-serif;
    }

    canvas {
      display: block;
      width: 100vw;
      height: 100vh;
    }
</style>


</head>

<body translate="no">
  <canvas id="scene"></canvas>
  
    <script >
const canvas = document.getElementById("scene");
const ctx = canvas.getContext("2d");

let w = 0;
let h = 0;
let dpr = Math.max(1, Math.min(2, window.devicePixelRatio || 1));

const world = {
  belt: null,
  hole: null,
  truck: null,
  truckSpawnX: 0,
  truckTargetX: 0,
  truckY: 0,
  box: null,
  phase: "backing",
  dropDelay: 2.2,
  fadeDuration: 0.7,
  departDelay: -1,
  beltOffset: 0,
  puffs: [] };


const wallLogo = new Image();
wallLogo.crossOrigin = "anonymous";
wallLogo.src = "//repo.bfw.wiki/bfwrepo/icon/617245a85118d.png";

const boxLogo = new Image();
boxLogo.crossOrigin = "anonymous";
boxLogo.src = "//repo.bfw.wiki/bfwrepo/icon/617245a85118d.png";

function clamp(v, min, max) {
  return Math.max(min, Math.min(max, v));
}

function lerp(a, b, t) {
  return a + (b - a) * t;
}

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

function normalizeAngle(a) {
  while (a > Math.PI) a -= Math.PI * 2;
  while (a < -Math.PI) a += Math.PI * 2;
  return a;
}

function lerpAngle(a, b, t) {
  const diff = normalizeAngle(b - a);
  return a + diff * t;
}

function nearestRightAngle(angle) {
  return Math.round(angle / (Math.PI * 0.5)) * (Math.PI * 0.5);
}

function roundRectPath(x, y, width, height, radius) {
  const r = Math.min(radius, width * 0.5, height * 0.5);
  ctx.beginPath();
  ctx.moveTo(x + r,.........完整代码请登录后点击上方下载按钮下载查看