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

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

代码语言：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 - leftWip.........完整代码请登录后点击上方下载按钮下载查看