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

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

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