processing实现canvas卡通人物死侍挥舞双手动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：processing实现canvas卡通人物死侍挥舞双手动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        * {
          margin: 0;
          box-sizing: border-box;
          overflow: hidden;
        }
        
        body {
          background: #222;
          background: #f5c850;
          width: 100%;
          height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        body canvas {
          box-shadow: 0.2em 0.2em 2em #0008;
          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 Deadpool = (function() {
              Deadpool = function() {
                  this.timer = 0;
                  this.speed = 3;
                  this.colors = {
                      head: color(211, 61, 64),
                      body: color(186, 54, 57),
                      dark: color(35, 35, 35),
                      light: color(245, 245, 245)
                  };
              };
              Deadpool.prototype = {
                  draw: function() {
                      pushMatrix();
                          translate(10, 0);
                          translate(300, 600);
                          rotate(radians(sin(radians(this.timer * this.speed)) * 8));
                          translate(-300, -600);
        
                          pushStyle();
                              //swords
                              //left
                              pushMatrix();
                                  translate(192, 80);
                                  translate(90, 420);
                                  rotate(radians(45 + sin(radians(this.timer - 15) * this.speed) * 25));
                                  translate(-90, -420);
        
                                  noStroke();
                                  fill(this.colors.dark);
                                  rect(80, 165, 24, 480, 5);
                                  rect(70, 290, 44, 9, 5);
                                  //diamonds on handle
                                  fill(140, 137, 140, 100);
                                  for(var i = 0; i < 7; i++) {
                                      quad(
                                          92, 168 + i * 17,
                                          99, 175 + i * 17,
                                          92, 182 + i * 17,
                                          83, 175 + i * 17);
                                  }
                              popMatrix();
        
                              //right
                              pushMatrix();
                                  translate(192, 80);
                                  translate(90, 420);
                                  rotate(radians(-45 + sin(radians(this.timer - 15) * this.speed) * 25));
                                  translate(-90, -420);
        
                              noStroke();
                                  fill(this.colors.dark);
                                  rect(80, 165, 24, 480, 5);
                                  rect(70, 290, 44, 9, 5);
                                  //diamonds on handle
                                  fill(140, 137, 140, 100);
                                  for(var i = 0; i < 7; i++) {
                                      quad(
                                          92, 168 + i * 17,
                                          99, 175 + i * 17,
                                          92, 182 + i * 17,
                                          83, 175 + i * 17);
                                  }
                              popMatrix();
        
                              pushMatrix();
                                  translate(348, 486);
                                  rotate(radians(sin(radians(this.timer - 20) * this.speed) * 10));
                                  translate(-348, -486);
        
                                  //left arm
                                  noFill();
                                  stroke(this.colors.body);
                                  strokeWeight(30);
                                  bezier(348, 486, 420, 386, 438, 273, 387, 146);
        
                                  //left hand
                                  pushMatrix();
                                      translate(387, 146);
                                      rotate(radians(sin(radians(this.timer - 20) * this.speed) * 120));
                                      translate(-387, -146);
        
                                      noStroke();
                                      fill(this.colors.dark);
                                      beginShape();
                                          vertex(343, 155);
                                          bezierVertex(338, 142, 337, 133, 339, 121);
                                          bezierVertex(330, 103, 322, 86, 331, 76);
                                          bezierVertex(346, 66, 356, 80, 360, 96);
                                          bezierVertex(360, 95, 364, 94, 367, 93);
                                          bezierVertex(367, 82, 363, 63, 375, 58);
                                          bezierVertex(393, 53, 395, 73, 395, 93);
                                          bezierVertex(396, 94, 397, 95, 400, 96);
                                          bezierVertex(403, 82, 406, 64, 420, 67);
                                          bezierVertex(434, 70, 432, 85, 430, 101);
                                          bezierVertex(424, 135, 424, 151, 408, 166);
                                          bezierVertex(396, 174, 382, 175, 368, 175);
                                          bezierVertex(356, 186, 342, 193, 333, 185);
                                          bezierVertex(325, 171, 335, 164, 343, 155);
                                      endShape(CLOSE);
                                  popMatrix();
                              popMatrix();
        
                              pushMatrix();
                                  translate(220, 486);
                                  rotate(radians(sin(radians(this.timer - 20) * this.speed) * 15));
                                  translate(-220, -486);
        
                                  //right arm
                                  noFill();
                                  stroke(this.colors.body);
                                  strokeWeight(30);
                                  bezier(220, 486, 142, 378, 147, 249, 208, 146);
        
                                  //right hand
                                  pushMatrix();
                                      translate(208, 146);
                                      rotate(radians(-50 + sin(radians(this.timer - 20) * this.speed) * 120));
                                      translate(-208, -146);
        
                                      noStroke();
                                      fil.........完整代码请登录后点击上方下载按钮下载查看