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

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

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