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: #DC284B;
          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 Logo = (function() {
    Logo = function(args) {
        this.scale = args.scale || 1.0;
        this.x = args.x || 600 * 0.5 * this.scale;
        this.y = args.y || 600 * 0.4 * this.scale;
        this.colors = {
            back: color(220, 40, 75),
            outline: color(5, 5, 5),
            from: color(102, 99, 98),
            to: color(13, 13, 13),
            text: color(35, 40, 60)
        };
        this.font = args.font || createFont("Trebuchet MS");
        this.gray = {
            words: "G R A Y  W O L F",
            index: 0,
            timer: 0,
            delay: 2
        };
        this.prod = {
            opacity: 0,
            y: height * 1.2,
        };
        this.img = undefined;
        this.imgs = [];
        this.splits = {
            left: undefined,
            right: undefined
        };
        this.timer = 0;
        this.states = {
            a: {
                delay: 30,
                duration: 120,
            },
            b: {
                delay: 30
            },
            c: {
                delay: 55
            },
            d: {
                delay: 45,
                x: 0
            }
        };
        this.state = "a";
        this.done = false;
        this.complete = false;
        this.hover = false;
        this.init();
    };
    Logo.prototype = {
        init: function() {
            var gx = createGraphics(600, 600, P2D);
            
            gx.background(0, 0);
            gx.fill(255);
            //inner
            gx.beginShape();
                gx.vertex(300, 137);
                gx.vertex(377, 150);
                gx.vertex(454, 118);
                gx.vertex(410, 213);
                gx.vertex(429, 202);
                gx.vertex(464, 279);
                gx.vertex(396, 361);
                gx.vertex(381, 316);
                gx.vertex(341, 399);
                gx.vertex(300, 443);
                gx.vertex(259, 399);
                gx.vertex(219, 316);
                gx.vertex(204, 361);
                gx.vertex(136, 279);
                gx.vertex(171, 202);
                gx.vertex(190, 213);
                gx.vertex(146, 118);
                gx.vertex(223, 150);
       .........完整代码请登录后点击上方下载按钮下载查看