Canvas各种复合操作效果在线测试: 粒子爆炸混合动画特效

Canvas Composite Operations：'xor', 'lighter', 'screen', 'overlay', 'difference', 'exclusion', 'source-over', 'none'

html5, canvas

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3317
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// Blob Class 
// Generic Particle class for both grow and explode
class Blob {
  constructor(config) {
    this.x = config.x;
    this.y = config.y;
    this.vx = config.vx;
    this.vy = config.vy;
    this.origin = {
      x: config.origin.x,
      y: config.origin.y,
    };
    this.size = {
      start: config.size.start,
      end: config.size.end,
    };
    this.diretion = this.size.start < this.size.end ? 'up' : 'down';
    this.operation = config.operation;
    this.died = config.died;
    this.color = config.color;
  }

update = () => {
    this.x += this.vx;
    this.y += this.vy;
    if (this.diretion === 'up' && this.size.start > (this.size.end - 1) || this.diretion === 'down' && this.size.start < (this.size.end + 1)) {
      this.died = true;
    }
    this.size.start = this.size.start - (this.size.start - this.size.end) * 0.1;
  };
}

// Render Class //
class Render {
  constructor(element) {
    this.element = element;
    this.operation = 'xor';
    this.canvas = this.createCanvas('canvas');
    this.points = [];
    this.tick = 0;
    this.ops = ~~(Math.random() * (this.operation.length - 1));
    window.addEventListener('resize', this.resetCanvas);
    window.addEventListener('mousemove', this.createPoint);
    this.renderLoop();
  }

// Set Options from GUI 
  setOptions = (options) => {
    this.operation = options.operation;
    this.baseHue = options.baseHue;
    this.baseSize = options.baseSize;
    this.baseSpeed = options.baseSpeed;
    this.drawBlobs = options.drawBlobs;
    this.drawLines = options.drawLines;
    this.motion = options.motion;
    this.speed = options.speed;
  };

setViewport = (element) => {
    const canvasElement = element;
    const width = ~~(document.documentElement.clientWidth, window.innerWidth || 0);
    const height = ~~(document.documentElement.clientHeight, window.innerHeight || 0);
    this.width = width;
    this.height = height;
    canvasElement.width = this.width;
    canvasElement.height = this.height;
  };

createCanvas = (name) => {
    const canvasElement = document.createElement('canvas');
    canvasElement.id = name;
    this.setViewport(canvasElement);
    this.element.appendChild(canvasElement);
    this.surface = canvasElement.getContext('2d');
    this.surface.scale(1, 1);
    return canvasElement;
  };

resetCanvas = () => {
    window.cancelAnimationFrame(this.animation);
    this.setViewport(this.canvas);
    this.renderLoop();
  };

createPoint = (event, demo) => {
    this.tick++;
    if (this.tick > 2) {
      this.tick = 0;
      const x = event ? event.pageX : this.width / 2;
      const y = event ? event.pageY : this.height / 2;
      const end = this.baseSize + ~~(Math.random() * 30);
      const start = demo ? end / 1.1 : 0;
      const origin = {
        x,
        y,
      };
      const point = new Blob({
        x,
        y,
        vx: Math.random() * this.baseSpeed - (this.baseSpeed / 2),
        vy: Math.random() * this.baseSpeed - (this.baseSpeed / 2),
        origin,
        size: {
          start,
          end,
        },
        died: false,
        color: `hsl(${this.baseHue + ~~(Math.random() * 60)}, 100%, 50%)`,
      });
      this.points.push(point);
    }
  };

createPop = (config) => {
    const angle = Math.random() * 2 * Math.PI;
    const radius = Math.random() * config.size.start * config.size.start;
    const pointX = config.x + Math.sqrt(radius) * Math.cos(angle);
    const pointY = config.y + Math.sqrt(radius) * Math.sin(angle);
    const point = new Blob({
      x: pointX,
      y: pointY,
      vx: ((pointX - config.x) * 0.1) + config.vx,
      vy: ((pointY - config.y) * 0.1) + config.vy,
      origin: {
        x: config.x,
        y: config.y,
      },
      size: {
        start: config.size.start / 2,
        end: 0,
      },
      died: false,
      color: config.color,
    });
    this.points.push(point);
  };

draw = (point) => {
    this.surface.beginPath();
    this.surface.fillStyle = point.color;
    this.surface.arc(point.x, point.y, point.size.start, 0, 2 * Math.PI, false);
    this.surface.fill();
  };
  drawLine(point1, point2) {
    this.surface.beginPath();
    this.surface.strokeStyle = point1.color;
    this.surface.lineWidth = 0.1;
    this.surface.moveTo(point1.x, point1.y);
    this.surface.lineTo(point2.x, point2.y);
    this.surface.stroke();
  }
  renderLoop = () => {
    this.surface.globalCompositeOperation = this.operation;
    if (this.motion) {
      this.surface.drawImage(this.canvas, 0, -this.speed);
    }
    this.surface.fillStyle = 'rgba(0,0,0,0.08)';
    this.surface.fillRect(0, 0, this.width, this.height);

for (let x = 0; x < this.points.length; x++) {
      const point = this.points[x];
      if (this.drawBlobs) {
        this.draw(point);
      }
      point.update();
      if (x < this.points.length - 1 && this.drawLines) {
        this.drawLine(point, point.origin);
      }
      if (point.died) {
        if (point.diretion === 'up') {
          this.points.splice(x, 1);
          const amt = ~~(Math.random() * 10) + 10;
          for (let i = 0; i < amt; i++) {
            this.createPop(point);
          }
        } else {
          this.points.splice(x, 1);
        }
      }
    }
    this.animation = window.requestAnimationFrame(this.renderLoop);
  };
}

// GUI Functions and Options
const assignOptions = () => {
  demo.setOptions(options);
}

let options = {
  baseHue: 40,
  baseSize: 10,
  baseSpeed: 5,
  operation: 'source-over',
  drawBlobs: true,
  drawLines: false,
  motion: false,
  speed: 3
};

// GUI Folders
let gui = new dat.GUI();
let folderParticle = gui.addFolder('Particle Options');
let folderRender = gui.addFolder('Render Options');
let folderMotion = gui.addFolder('Add Motion');
folderParticle.add(options, 'baseSize', 1, 50).step(1).onFinishChange(assignOptions);
folderRender.add(options, 'baseHue', 1, 360).step(1).onFinishChange(assignOptions);
folderParticle.add(options, 'baseSpeed', 1, 20).step(1).onFinishChange(assignOptions);
folderRender.add(options, 'drawBlobs').onFinishChange(assignOptions);
folderRender.add(options, 'drawLines').onFinishChange(assignOptions);
folderRender.add(options, 'operation', ['xor', 'lighter', 'screen', 'overlay', 'difference', 'exclusion', 'source-over', 'none']).onFinishChange(assignOptions);
folderMotion.add(options, 'motion').onFinishChange(assignOptions);
folderMotion.add(options, 'speed', 1, 10).step(1).onFinishChange(assignOptions);
folderParticle.open();

document.querySelector('.datgui').appendChild(gui.domElement);

编译

CSS

HTML

Canvas Composite Operations：'xor', 'lighter', 'screen', 'overlay', 'difference', 'exclusion', 'source-over', 'none'

html5, canvas

编辑器支持Emmet

快捷键

Canvas Composite Operations：'xor', 'lighter', 'screen', 'overlay', 'difference', 'exclusion', 'source-over', 'none'

html5, canvas

HTML5 Canvas炫酷粒子动画特效在线生成系统

HTML5 Canvas可在线定制的9类粒子爆发动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：