canvas模拟汽车雨刮器摇摆动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：canvas模拟汽车雨刮器摇摆动画效果代码

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

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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
* {
  margin: 0;
  padding: 0;
  background: #241C1F;
}
canvas {
  margin: 0 auto;
  display: block;
  border-left: 0;
  border-right: 0;
}
</style>



</head>

<body >
  <canvas id="mainCanvas" width="800" height="300"></canvas>

  
      <script >
// twitter @msvaljek
// https://msvaljek.blogspot.com/2013/06/canvas-wipers.html

// wipers

// standard shim
window.requestAnimFrame = function () {
  return window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  function (callback) {
    window.setTimeout(callback, 1000 / 60);
  };
}();

function distance(p1X, p1Y, p2X, p2Y) {
  return Math.sqrt(Math.pow(p1X - p2X, 2) + Math.pow(p1Y - p2Y, 2));
}

// dom
var canvas = document.getElementById('mainCanvas');
var ctx = canvas.getContext('2d');

var engineSpeed = -0.05,
engineAngle = 0,
engineX = Math.floor(canvas.width * 0.6);
engineR = 10,
engineY = Math.floor(canvas.height - 2 * engineR),
leftWiperX = Math.floor(engineX - canvas.height / 2),
leftWiperLowerHandle = 11,
leftWiperY = engineY - leftWiperLowerHandle,
leftShaftLength = leftWiperX - engineX - leftWiperLowerHandle + engineR,
rightWiperX = Math.floor(engineX + canvas.height / 7),
rightWiperLowerHandle = 13,
rightWiperY = engineY - leftWiperLowerHandle,
rightShaftLength = rightWiperX - engineX,
wiperCarrierLength = 100,
wiperSubCarrierLength = 20,
subCarrierAngle = Math.PI / 4,
wiperFlipLowerRatio = 0.3,
wiperFlipUpperRatio = 1.7,
jointR = 2,
lineWidth = 3;

(function animloop() {
  requestAnimFrame(animloop);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.lineWidth = lineWidth;

  // motor
  engineAngle = (engineAngle + engineSpeed) % (2 * Math.PI);
  ctx.fillStyle = '#8C8F4D';
  ctx.strokeStyle = '#E2E868';
  ctx.beginPath();
  ctx.arc(engineX, engineY, engineR, 0, 2 * Math.PI);
  ctx.fill();
  ctx.beginPath();
  ctx.moveTo(engineX, engineY);
  var crankX = engineX + Math.cos(engineAngle) * engineR,
  crankY = engineY + Math.sin(engineAngle) * engineR;
  ctx.lineTo(crankX, crankY);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(crankX, crankY, jointR, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.stroke();

  // left wiper begin
  ctx.beginPath();
  ctx.arc(leftWiperX, leftWiperY, leftWiperLowerHandle, 0, 2 * Math.PI);
  ctx.fill();

  var dx = crankX - leftWiperX;
  var dy = crankY - leftWiperY;
  var d = distance(crankX, crankY, leftWiperX, leftWiperY);
  var a = (leftWiperLowerHandle * leftWiperLowerHandle - leftShaftLength * leftShaftLength + d * d) / (2.0 * d);
  var x2 = leftWiperX + dx * a / d;
  var y2 = leftWiperY + dy * a / d;
  var h = Math.sqrt(leftWiperLowerHandle * leftWiperLowerHandle - a * a);
  var rx = -dy * (h / d);
  var ry = dx * (h / d);
  var joinLeftX = x2 + rx;
  var jointLeftY = y2 + ry;

  // left shaft
  ctx.beginPath();
  ctx.moveTo(crankX, crankY);
  ctx.lineTo(joinLeftX, jointLeftY);
  ctx.closePath();
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(joinLeftX, jointLeftY, jointR, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.stroke();

  // left leaver
  ctx.beginPath();
  ctx.moveTo(joinLeftX, jointLeftY);
  ctx.lineTo(leftWiperX, leftWiperY);
  ctx.closePath();
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(leftWiperX, leftWiperY, jointR, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.stroke();

  var circledist = distance(leftWiperX - leftWiperLowerHandle, leftWiperY, joinLeftX, jointLeftY);
  var dAngleL = 2 * Math.acos(circledist / (2 * leftWiperLowerHandle)) + Math.PI * 4 / 5;
  var carrierLTopX = leftWiperX + Math.cos(dAngleL) * wiperCarrierLength;
  var carrierLTopY = leftWiperY + Math.sin(dAngleL) * wiperCarrierLength;

  var wiperFlipLTopX = leftWiperX + Math.cos(dAngleL) * (wiperCarrierLength * wiperFlipUpperRatio);
  var wiperFlipLTopY = leftWiperY + Math.sin(dAngleL) * (wiperCarrierLength * wip.........完整代码请登录后点击上方下载按钮下载查看