canvas实现一个蜘蛛南瓜头燃烧动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：canvas实现一个蜘蛛南瓜头燃烧动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        * {
          margin: 0;
          box-sizing: border-box;
          overflow: hidden;
        }
        
        body {
          background: #272829;
          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 headColor = color(218, 89, 24, 210);
    var outlineColor = color(159, 67, 20);
    var mouthColor = color(244, 238, 43, 200);
    var mouthShadowColor = color(224, 131, 45);
    var eyeColor = color(244, 238, 43, 200);
    var eyeShadowColor = color(148, 61, 10);
    var stalkColor = color(28, 99, 10, 200);
    var backgroundColor = color(39, 40, 41);
    var webColor = color(255, 255, 255, 50);
    var spiderColor = color(0);
    var spiderStripeColor = color(201, 26, 26, 200);
    var particleColor = color(230, 62, 28, 50);

    var xOffset = -40;
    var yOffset = 60;

    var spiderYOffset = 0;
    var yDir = 1;

    //Particle object
    var Particle = function(position, acceleration, timeToLive, c, size) {
        this.acceleration = acceleration;
        this.velocity = new PVector(random(-1, 1), random(-1, 1));
        this.position = position.get();
        this.timeToLive = timeToLive;
        this.color = c;
        this.size = size;
    };

    //Run the particle
    Particle.prototype.run = function() {
        this.update();
        this.display();
    };

    //Update the particle
    Particle.prototype.update = function() {
        this.velocity.add(this.acceleration);
        this.position.add(this.velocity);
        this.timeToLive -= 2;
    };

    //Display the particle
    Particle.prototype.display = function() {
        noStroke();
        fill(this.color);
        ellipse(this.position.x, this.position.y, this.size, this.size);
    };

    //Check if the particle is dead
    Particle.prototype.isDead = function() {
        if (this.timeToLive < 0) {
            return true;
        }
        else {
            return false;
        }
    };

    //Particle System object - manages the particles
    var ParticleSystem = function(position, acceleration, c, size) {
        this.origin = position.get();
        this.acceleration = acceleration || new PVector(0, 0.08);
        this.particles = [];
        this.color = c || particleColor;
        this.size = size || 15;
        this.timeToLive = 60;
    };

    //Add a new particle
    ParticleSystem.prototype.addParticle = function() {
        this.particles.push(new Particle(this.origin, this.acceleration, this.timeToLive, this.color, this.size));
    };

    //Run each of the particles in the system, and remove it if it's dead
    ParticleSystem.prototype.run = function() {
        for(var i = this.particles.length-1; i >= 0; i--) {
            var p = this.particles[i];
            p.run();
            if (p.isDead()) {
                this.particles.splice(i, 1);
            }
        }
    };

    var pumpkin = function() {
        pushMatrix();
        translate(xOffset, yOffset);
        //stalk
        fill(stalkColor);
        noStroke();
        beginShape();
        vertex(208, 108);
        bezierVertex(200, 55, 190, 60, 165, 60);
        bezierVertex(161, 65, 161, 70, 163, 75);
        bezierVertex(180, 75, 190, 67, 188, 108);
        endShape();

        //head
        noStroke();
        noFill();
        fill(headColor);
        beginShape();
        vertex(210, 110);
        bezierVertex(225, 103, 245, 103, 260, 110); //1
        bezierVertex(350, 120, 350, 290, 260, 300); //2
        bezierVertex(240, 310, 200, 310, 210, 305); //3
        bezierVertex(210, 310, 190, 310, 190, 305); //bottom
        bezierVertex(170, 310, 160, 310, 140, 300); //-3
        bezierVertex(50, 290, 50, 100, 140, 110); //-2
        bezierVertex(155, 103, 175, 103, 190, 110); //-1
        bezierVertex(195, 103, 205, 103, 210, 110);//top
        endShape();

        //curves
        noFill();
        stroke(outlineColor);
        stroke(201, 87, 12);
        strokeWeight(2);
        //top
        beginShape();
        vertex(165, 130);
        bezierVertex(192, 98, 208, 98, 235, 130);//top
        endShape();
        //1
        beginShape();
        vertex(212, 110);
        bezierVertex(225, 103, 245, 101, 270, 117); //1
        endShape();
        //2
        beginShape();
        vertex(260, 110);
        bezierVertex(350, 120, 350, 290, 260, 300); //2
        endShape();
        //3
        beginShape();
        vertex(280, 270);
        bezierVertex(280, 280, 275, 290, 260, 300); //3
        bezierVertex(240, 310, 200, 310, 212, 305); //3
        endShape();
        //bottom
        beginShape();
        vertex(230, 290);
        bezierVertex(210, 315, 190, 315, 170, 290); //bottom
        endShape();
        //-3
        beginShape();
        vertex(188, 305);
        bezierVertex(170, 310, 160, 310, 140, 300); //-3
        bezierVertex(132, 295, 120, 290, 120, 270); //-3
        endShape();
        //-2
        beginShape();
        vertex(140, 300);
        bezierVertex(50, 290, 50, 100, 140, 110); //-2
        endShape();
        //-1
        beginShape();
        vertex(130, 120);
        bezierVertex(155, 97, 175, 103, 188, 110); //-1
        endShape();

        //mouth (starting from the top/middle and moving clockwise
        fill(mouthColor);
        strokeWeight(1);
        beginShape();
        vertex(193, 220);
        vertex(206, 220);
        vertex(209, 240);
        vertex(232, 241);
        vertex(234, 221);
        vertex(244, 222);
        vertex(246, 238);
        vertex(260, 234);
        vertex(259, 222);
        vertex(269, 220);
        vertex(271, 230);
        vertex(281, 228);
        vertex(282, 215);
        bezierVertex(295, 215, 300, 215, 312, 184);
        bezierVertex(310, 215, 310, 225, 279, 256);
        vertex(277, 248);
        vertex(270, 251);
        vertex(270, 263);
        vertex(263, 266);
        vertex(262, 257);
        vertex(250, 260);
        vertex(250, 270);
        vertex(239, 272);
        vertex(238, 262);
        vertex(218, 262);
        vertex(217, 273);
        vertex(205, 274);
        vertex(204, 262);
        vertex(190, 264);
        vertex(190, 274);
        vertex(176, 276);
        vertex(176, 267);
        vertex(171, 262);
        vertex(160, 261);
        vertex(158, 272);
        vertex(143, 269);
        vertex(143, 258);
        vertex(128, 254);
        vertex(126, 261);
        bezierVertex(90, 240, 90, 230, 80, 190);
        bezierVertex(90, 210, 100, 215, 110, 220);
        vertex(109, 228);
        vertex(124, 232);
        vertex(125, 223);
        vertex(134, 221);
        vertex(133, 235);
        vertex(158, 237);
        vertex(156, 223);
        vertex(167, 222);
        vertex(167, 238);
        vertex(190, 239);
        vertex(193, 220);
        endShape();

        //teeth shadow
        fill(mouthShadowColor);
        fill(eyeShadowColor);
        strokeWeight(1);
        noStroke();
        //from bottom left
        //0
        beginShape();
        vertex(126, 260);
        bezierVertex(106, 253, 84, 230, 82, 192);
        bezierVertex(80, 194, 90, 209, 95, 211);
        bezierVertex(100, 230, 109, 240, 127, 255);
        vertex(126, 260);
        endShape();
        //1
        beginShape();
        vertex(127, 254);
        vertex(130, 246);
        vertex(144, 249);
        vertex(144, 258);
        vertex(127, 254);
        endShape();

        //1 gap
        beginShape();
        vertex(144, 263);
        vertex(158, 267);
        vertex(158, 272);
        vertex(143, 269);
        vertex(143, 263);
        endShape();

        //2
        beginShape();
        vertex(160, 260);
        vertex(162, 253);
        vertex(173, 254);
        vertex(172, 262);
        vertex(160, 261);
        endShape();
        beginShape();
        vertex(171, 261);
        vertex(173, 254);
        vertex(179, 260);
        vertex(177, 267);
        vertex(171, 261);
        endShape();
        beginShape();
        vertex(176, 267);
        vertex(179, 260);
        vertex(179, 276);
        vertex(176, 275);
        vertex(176, 267);
        endShape();

        //2 gap
        beginShape();
        vertex(179, 274);
        vertex(179, 270);
        vertex(190, 269);
        vertex(190, 274);
        vertex(179, 275);
        endShape();

        //3
        beginShape();
        vertex(189, 264);
        vertex(193, 258);
        vertex(205, 256);
        vertex(205, 262);
        vertex(189, 264);
        endShape();

        //3 gap
        beginShape();
        vertex(205, 268);
        vertex(217, 267);
        vertex(217, 273);
        vertex(205, 274);
        vertex(205, 268);
        endShape();

        //4
        beginShape();
        vertex(217, 273);
        vertex(214, 267);
        vertex(214, 257);
        vertex(218, 261);
        vertex(217, 273);
        endShape();
        beginShape();
        vertex(218, 262);
        vertex(214, 257);
        vertex(238, 256);
        vertex(239, 262);
        vertex(218, 262);
        endShape();

        //4 gap
        beginShape();
        vertex(239, 266);
        vertex(250, 264);
        vertex(250, 270);
        vertex(239, 272);
        vertex(239, 266);
        endShape();

        //5
        beginShape();
        vertex(250, 269);
        vertex(248, 265);
        vertex(248, 255);
        vertex(250, 260);
        vertex(250, 269);
        endShape();
        beginShape();
        vertex(250, 260);
        vertex(248, 255);
        vertex(261, 252);
        vertex(263, 257);
        vertex(250, 260);
        endShape();

        //5 gap
        begin.........完整代码请登录后点击上方下载按钮下载查看