canvas实现一个机器猫走路动画效果代码-html代码-BFW代码库

canvas实现一个机器猫走路动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现一个机器猫走路动画效果代码，结合了processing.js

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
* {
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
}

body {
  background: #5530AB;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
body canvas {
  border: none;
  outline: none;
}
</style>


</head>

<body  >
  <canvas id="canvas"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/processing.min.js"></script>

      <script>
var sketchProc = function(processingInstance) {
  with (processingInstance) {
    size(600, 600); 
    frameRate(60);    
    smooth();

    var RoboCat = (function() {
      RoboCat = function(args) {
          this.x = args.x || 0;
          this.y = args.y || 0;
          this.timer = 0;
          this.rot_timer = 0;
          this.speed = 2;
          this.shake = 0;
          this.shakedown = 0.1;
          this.colors = args.colors || {
              light: color(242, 239, 242),
              dark: color(33, 33, 33),
              side: color(182, 101, 235),
              accent: color(93, 227, 209),
              accentRGB: [93, 227, 209]
          };
          this.body = {
              x: 0,
              y: 0,
              angle: 0,
              timer: 40,
              xoff: 0
          };
          this.arms = {
              right: {
                  joint1: 0,
                  joint2: 0,
                  finger1: 0,
                  finger2: 0,
                  finger3: 0,
                  joint1t: 0,
                  joint2t: 0
              },
              left: {
                  xoff: {
                      value: 0,
                      target: 0,
                      timer: 0,
                      delay: {
                          value: 0,
                          min: 30,
                          max: 120
                      }
                  },
                  yoff: {
                      value: 0,
                      target: 0,
                      timer: 0,
                      delay: {
                          value: 0,
                          min: 30,
                          max: 120
                      }
                  }
              }
          };
          this.legs = {
              right: {
                  x1: 423,
                  y1: 393,
                  x2: 400,
                  y2: 400,
                  x3: 416,
                  y3: 502,
                  l1: 67,
                  l2: 60,
                  vx3: 0,
                  vy3: 0
              },
              left: {
                  x1: 423,
                  y1: 393,
                  x2: 400,
                  y2: 400,
                  x3: 416,
                  y3: 502,
                  l1: 67,
                  l2: 60,
                  vx3: 0,
                  vy3: 0
              }
          };
          this.eye = {
              show: true,
              timer: 0,
              delay: {
                  value: 60,
                  min: 60,
                  max: 240
              }
          };
          this.state = 0;
          this.change = 0;
          this.fire = {
              state: 0, //0 = normal, 1 = heating up, 2 = blast
              opacity: 0,
              timer: 0,
              fired: false,
              bullets: [],
              smokes: []
          };
      };
      RoboCat.prototype = {
          //Credit to JentGent for this function
          joint: function(Ax, Ay, Bx, By, b, c, v) {
              var t = atan2(By - Ay, Bx - Ax);
              var a = dist(Ax, Ay, Bx, By);
            
              var f = acos(((Bx - Ax) * (Bx - Ax) + (By - Ay) * (By - Ay) + (c * c) - (b * b)) / (2 * a * b)) || 0;
              var Cx = Ax + cos(t + f * v) * c || 0,
                  Cy = Ay + sin(t + f * v) * c || 0;

              return {x: Cx, y: Cy};
          },
          draw: function() {
              pushMatrix();
                  translate(0, this.body.y);

                  {
                  //back of ears
                  noStroke();
                  fill(this.colors.dark);
                  beginShape();
                      vertex(285, 118);
                      bezierVertex(311, 130, 329, 153, 340, 182);
                      vertex(285, 182.........完整代码请登录后点击上方下载按钮下载查看