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

代码语言：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);
                  endShape(CLOSE);
                  beginShape();
                      vertex(371, 118);
                      bezierVertex(398, 130, 415, 153, 430, 182);
                      vertex(371, 182);
                  endShape(CLOSE);

                  //front of ears
                  noStroke();
                  fill(this.colors.light);
                  beginShape();
                      vertex(242, 182);
                      vertex(264, 126);
                      bezierVertex(273, 112, 286, 112, 296, 126);
                      vertex(317, 182);
                  endShape(CLOSE);
                  beginShape();
                      vertex(330, 182);
                      vertex(350, 129);
                      bezierVertex(359, 112, 374, 112, 382, 127);
                      vertex(404, 182);
                  endShape(CLOSE);

                  //inner ears
                  noFill();
                  stroke(this.colors.accent);
                  strokeWeight(2);
                  beginShape();
                      vertex(257, 182);
                      vertex(269, 146);
                      bezierVertex(276, 133, 284, 133, 291, 146);
                      vertex(304, 182);
                  endShape(CLOSE);
                  beginShape();
                      vertex(343, 182);
                      vertex(356, 146);
                      bezierVertex(364, 133, 370, 133, 377, 146);
                      vertex(390, 182);
                  endShape(CLOSE);
                  } //ears

                  {
                  //handle on back of body
                  noFill();
                  stroke(this.colors.accent);
                  strokeWeight(2);
                  beginShape();
                      vertex(444, 195);
                      vertex(464, 200);
                      bezierVertex(473, 200, 478, 206, 480, 213);
                      vertex(495, 266);
                      bezierVertex(497, 272, 498, 280, 494, 286);
                      vertex(476, 305);
                  endShape(CLOSE);
                  } //handle on back of body

                  {
                  //RIGHT LEG
                  pushMatrix();
                      translate(-145, 0); //move to the right (right leg)
                      translate(0, -this.body.y);

                      //lower leg on right
                      noFill();
                      strokeWeight(26);
                      stroke(this.colors.dark);
                      line(   this.legs.right.x2, 
                              this.legs.right.y2, 
                              this.legs.right.x3 + this.legs.right.vx3, 
                              this.legs.right.y3 + this.legs.right.vy3);
                      strokeWeight(1);

                      //TOP PART OF LEG
                      pushMatrix();
                          noFill();
                          strokeWeight(26);
                          stroke(this.colors.dark);
               .........完整代码请登录后点击上方下载按钮下载查看