canvas牛顿摆动画效果代码-html代码-BFW代码库

canvas牛顿摆动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas牛顿摆动画效果代码

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

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

<head>

  <meta charset="UTF-8">


  
  
<style>
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0d0d0d;
}

.canvas {
  width: 600px;
  height: 600px;
  background: antiquewhite;
  border: 10px solid dimgrey;
}
</style>


</head>

<body  >
  <div class="container">
			<canvas class="canvas"></canvas>
</div>

  
      <script  >
const $canvas = document.querySelector('.canvas');
const context = $canvas.getContext('2d');
const pixelRatio = window.devicePixelRatio || 1;
const canvasStyleWidth = $canvas.clientWidth;
const canvasStyleHeight = $canvas.clientHeight;
$canvas.width = canvasStyleWidth * pixelRatio;
$canvas.height = canvasStyleHeight * pixelRatio;
context.scale(pixelRatio, pixelRatio);
const middleX = canvasStyleWidth / 2;

const platFormYPos = 450;
const platformWidth = 500;
const platformFrontHeight = 50;
const backWidth = 300;
const backFrameBottomY = 410;
const backFrameWidth = 270;
const backFrameHeight = 200;
const frontFrameBottomY = 440;
const frontFrameWidth = 360;
const frontFrameHeight = 270;
const numBalls = 5;
const ballRadius = backFrameWidth / numBalls / 2;
const ballMiddleY = 380;
const frontFrameSingleSegment = frontFrameWidth / (numBalls + 1);
const backFrameSingleSegment = backFrameWidth / (numBalls + 1);
let rotationA = 0;
let backRotationA = 0;
let rotationB = 0;
let backRotationB = 0;
let swingTurn = 1;
let rotationACounter = 0;
let rotationBCounter = 0;


function drawPlatform() {
  // front edge
  context.save();
  context.translate(middleX, platFormYPos);
  let x = -(platformWidth / 2);
  let y = 0;
  context.fillStyle = '#000';
  context.fillRect(x, y, platformWidth, platformFrontHeight);
  const stripHeight = 20;
  y = (platformFrontHeight - stripHeight) / 2;
  context.fillStyle = '#626262';
  context.fillRect(x, y, platformWidth, stripHeight);
  const tinyStripHeight = 6;
  y = (platformFrontHeight - tinyStripHeight) / 2;
  context.fillStyle = '#000';
  context.fillRect(x, y, platformWidth, tinyStripHeight);

  // base
  context.translate(x, 0);
  context.beginPath();
  context.moveTo(0, 0);
  context.lineTo((platformWidth - backWidth) / 2, -50);
  context.lineTo((platformWidth - backWidth) / 2 + backWidth, -50);
  context.lineTo(platformWidth, 0);
  context.fillStyle = '#303030';
  context.fill();
  context.restore();
}

function drawFrame(startingBottomY, width, topY) {
  context.save();
  context.translate(middleX, startingBottomY);
  let x = -(width / 2);
  context.beginPath();
  context.moveTo(x, 0);
  context.arcTo(x, topY, x + width, topY, 30);
  context.arcTo(x + width, topY, x + width, 0, 30);
  context.lineTo(x + width, 0);
  context.strokeStyle = '#afb2b1';
  context.lineWidth = 6;
  context.stroke();
  context.restore();
}

function drawBackFrame() {
  drawFrame(backFrameBottomY, backFrameWidth, -backFrameHeight);
}

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