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;
  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();
    
textFont(createFont("Trebuchet MS"), 30);

var app;
    
var clicked = false, hover = false;
mousePressed = function () {
    clicked = true;
};
    
var Button = (function() {
    var Button = function(args) {
        this.x = args.x;
        this.y = args.y;
        this.w = args.w || 100;
        this.h = args.h || 50;
        this.content = args.content;
        this.textSize = args.textSize || this.w * 0.18;
        this.enabled = true;
        this.hover = false;
        this.func = args.func;
        this.backColor = args.backColor || color(240);
        this.textColor = args.textColor || color(25);
    };
    Button.prototype = {
        over: function() {
            return (mouseX > this.x && 
                    mouseX < this.x + this.w && 
                    mouseY > this.y && 
                    mouseY < this.y + this.h);
        },
        draw: function() {
            noStroke();
            
            this.hover = this.over();

            if(this.enabled && this.hover) {
                hover = true;
            }

            fill(this.backColor, this.enabled && this.hover ? 50 : 100);
            rect(this.x, this.y, this.w, this.h);
    
            pushStyle();
                textAlign(CENTER, CENTER);
                textSize(this.textSize);
                fill(this.enabled ? this.textColor : color(this.textColor, 100));
                text(this.content, this.x + this.w / 2, this.y + this.h / 2);
            popStyle();
    
            if(this.enabled && clicked && this.hover) {
                this.func();
            }
        }
    };
    return Button;
})();

var Person = (function() {
    Person = function(args) {
        this.x = args.x || 300;
        this.y = args.y || 150;
        this.length = args.length || 160;
        this.diameter = args.diameter || this.length / 2;
        this.thickness = args.thickness || 2;
        this.timer = 0;
        this.speed = args.speed || 5;
        this.angle = -10;
        this.colors = args.colors || {
            skin: color(250, 225, 200),
            stroke: color(60),
            feet: color(40)
        };
        this.canChangeSpeed = true;
        this.limbs = args.limbs || [
            { //left arm
                x: 0,
                y: 0,
                offset: 60,
                color: color(252, 101, 106),
                upper: {
                    angle: 10,
                    dist: 70,
                    length: this.length * 0.4
                },
                lower: {
                    angle: -60,
                    dist: 50,
                    length: this.length * 0.34
                }
            },
            { //right arm
                x: 0,
                y: 0,
                offset: 240,
                color: color(222, 89, 93),
                upper: {
                    angle: 10,
                    dist: 70,
                    length: this.length * 0.4
                },
                lower: {
                    angle: -60,
                    dist: 50,
                    length: this.length * 0.34
                }
            },
            { //left leg
                x: 0,
                y: 0,
                offset: 180,
                color: color(252, 101, 106),
                upper: {
                    angle: -10,
                    dist: 60,
                    length: this.length / 2
                },
                lower: {
                    angle: 60,
                    dist: 50,
                    length: this.length * 0.37
                },
                foot: {
                    angle: -70,
                    dist: 20,
                    length: this.length * 0.125
                }
            },
            { //right leg
                x: 0,
                y: 0,
                offset: 0,
                color: color(222, 89, 93),
                upper: {
                    angle: -10,
                    dist: 60,
       .........完整代码请登录后点击上方下载按钮下载查看