对画布粒子应用随机旋转 [英] Apply random rotation to canvas particles

查看：100
本文介绍了对画布粒子应用随机旋转的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试更新现有的



我已经更改了形状，但是遇到了几个问题：


  1. 它不再像上面发布的原始演示链接中那样旋转。

  2. 因为我用形状的图像替换了线条，所以我也面临着如果我增加粒子，则会出现性能问题。

  3. 如果我随机化大小，它将不断更新形状的大小，而不会保持第一个随机大小。

      context.drawImage（svg，x，y，20，40）
     | 
    v 
     context.drawImage（svg，x，y，Math.random（）* 20，Math.random（）* 40）


有人可以指出正确的方向吗，我应该解决上面的问题。感谢任何帮助！



  var confetti = {maxCount：150，// set最大纸屑计数速度：1，//设置粒子动画速度frameInterval：30，//纸屑动画框架间隔（以毫秒为单位）alpha：1.0，//纸屑的alpha不透明度（介于0和1之间，其中1是不透明的， 0是不可见的）渐变：false，//是否为五彩纸屑粒子使用渐变start：null，//调用以开始五彩纸屑动画（可选的超时时间以毫秒为单位，可选的最小和最大随机五彩纸屑数）stop：null，/ / call停止添加纸屑动画切换：null，//调用开始或停止纸屑动画，具体取决于它是否已经运行暂停：null，//调用冻结纸屑动画resume：null，//调用解冻c onfetti动画togglePause：null，//调用以切换是否暂停五彩纸屑动画remove：null，//调用以停止五彩纸屑动画并立即删除所有五彩纸屑isPaused：null，//调用并根据true或false返回true或false五彩纸屑动画被暂停isRunning：null //调用并根据动画是否在运行而返回true或false};（function（）{confetti.start = startConfetti; confetti.stop = stopConfetti; confetti.toggle = toggle五彩纸屑; confetti.pause = pauseConfetti; confetti.resume = resumeConfetti; confetti.togglePause = toggleConfettiPause; confetti.isPaused = isConfettiPaused; confetti.remove = removeConfetti; confetti.isRunning = isConfettiRunning; varsupportsAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame; var colors = [ rgba（30,144,255，， rgba（107,142,35，， rgba（255,215,0，， rgba（255,192,203，， rgba（106,90,205，， rgba（173,216,230， ， rgba（238,130,238）， rgba（152,251,152）， rgba（70,130,180，， rgba（244,164,96）， rgba（210,105,30，， rgba（220,20,60， ]; varstreamingConfetti = false; var animationTimer = null; var pause = false; var lastFrameTime = Date.now（）; var particle = []; var waveAngle = 0; var context = null;函数getRandomInt（min，max） {min = Math.ceil（min）; max = Math.floor（max）; return Math.floor（Math.random（）*（max-min + 1））+ min;}函数resetParticle（粒子，宽度，高度）{particle.color = colors [（Math.random（）* colors.length）| 0] +（confetti.alpha +））;粒子.color2 = colors [（Math.random（）* colors.length） | 0] +（confetti.alpha +））;粒子.x = getRandomInt（0，宽度）;粒子.y = getRandomInt（-高度/ 2，0）;粒子。直径= Math.random（）* 10 + 5;粒子倾斜度= Math.random（）* 10-10;局部le.tiltAngleIncrement = Math.random（）* 0.07 + 0.05; particle.tiltAngle = Math.random（）* Math.PI;返回粒子}函数toggleConfettiPause（）{如果（暂停）resumeConfetti（）;否则pauseConfetti（）; }函数isConfettiPaused（）{返回暂停； }函数pauseConfetti（）{pause = true; }函数resumeConfetti（）{暂停=否； runAnimation（）; }函数runAnimation（）{如果（暂停）返回；否则if（particles.length === 0）{context.clearRect（0，0，window.innerWidth，window.innerHeight）; animationTimer = null; } else {var now = Date.now（）; var delta = now-lastFrameTime;如果（！supportsAnimationFrame || delta> confetti.frameInterval）{context.clearRect（0，0，window.innerWidth，window.innerHeight）; updateParticles（）; drawParticles（context）; lastFrameTime = now-（delta％confetti.frameInterval）; } animationTimer = requestAnimationFrame（runAnimation）; }}函数startConfetti（timeout，min，max）{var width = window.innerWidth; var height = window.innerHeight; window.requestAnimationFrame =（function（）{返回window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function（callback）{返回window.setTimeout（callback，confetti.frameInterval ）;};}）（）; var canvas = document.getElementById（ confetti-canvas）;如果（canvas === null）{canvas = document.createElement（ canvas）; canvas.setAttribute（ id，五彩纸屑画布）; canvas.setAttribute（ style， display：block; z-index：999999; pointer-events：none; position：fixed; top：0）； document.body.prepend（画布）; canvas.width =宽度; canvas.height =高度; window.addEventListener（ resize，function（）{canvas.width = window.innerWidth; canvas.height = window.innerHeight;}，true）； context = canvas.getContext（ 2d）; } else if（context === null）context = canvas.getContext（ 2d）; var count = confetti.maxCount; if（min）{if（max）{if（min == max）count =粒子长度+最大； else {if（min> max）{var temp = min;最小值=最大值;最大=温度; } count = particle.length +（（（Math.random（）*（max-min）+ min）| 0）; }} else count = particle.length + min;否则，如果（max）count =粒子长度+最大值； while（particles.length< count）particle.push（resetParticle（{}，width，height））; StreamingConfetti = true;暂停=假; runAnimation（）; if（timeout）{window.setTimeout（stopConfetti，timeout）; }}函数stopConfetti（）{StreamingConfetti = false; }函数removeConfetti（）{stop（）;暂停=假;粒子= []; }函数toggleConfetti（）{如果（streamingConfetti）stopConfetti（）;否则startConfetti（）; }函数isConfettiRunning（）{返回streamingConfetti; }函数drawParticles（context）{var particle; var x，y，x2，y2; for（var i = 0; i  

  html {高度：100％；} body，html {边距：0；} body {背景：黑色；}

解决方案

好的，这就是我所做的：


  1. 我更改了 drawParticles 以应用 particle.tilt 。

  2. 我将 svg 变量移到了顶部，因此可以重复使用，并且不会多次加载。

  3. 我确实设置了随机变量 resetParticle 中的大小，因此以后不会更改。

  var五彩纸屑= {maxCount：150，//设置最大五彩纸屑计数速度：1，//设置粒子动画速度frameInterval：30，//五彩纸屑动画帧间隔以毫秒为单位alpha：1.0，//五彩纸屑的alpha不透明度（0到1之间，其中1是不透明的，0是不可见的）gradient：false，//是否为五彩纸屑粒子使用渐变开始：null，// call开始五彩纸屑动画（具有可选的超时时间，以毫秒为单位，以及可选的最小和最大随机五彩纸屑数）stop：null，//调用以停止添加五彩纸屑切换：null，//调用以开始或停止五彩纸屑动画，具体取决于它是否已经运行暂停：null，//调用以冻结五彩纸屑动画恢复：null，//调用以解冻五彩纸屑动画togglePause：null，//调用以切换是否暂停五彩纸屑动画remove：null，//调用以停止五彩纸屑动画并立即删除所有五彩纸屑isPaused：null，//调用并根据是否暂停五彩纸屑动画返回true或false isRunning：null //调用并根据动画是否运行返回true或false};（function（）{ confetti.start = startC onfetti; confetti.stop = stopConfetti; confetti.toggle = toggle五彩纸屑; confetti.pause = pauseConfetti; confetti.resume = resumeConfetti; confetti.togglePause = toggleConfettiPause; confetti.isPaused = isConfettiPaused; confetti.remove = removeConfetti; confetti.isRunning = isConfettiRunning; varsupportsAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame; var colors = [ rgba（30,144,255，， rgba（107,142,35，， rgba（255,215,0，， rgba（255,192,203，， rgba（106,90,205，， rgba（173,216,230， ， rgba（238,130,238）， rgba（152,251,152）， rgba（70,130,180，， rgba（244,164,96）， rgba（210,105,30，， rgba（220,20,60， ]; varstreamingConfetti = false; var animationTimer = null; var pause = false; var lastFrameTime = Date.now（）; var particle = []; var waveAngle = 0; var context = null; var size = []; var svg = new Image（）; svg.src ='https://i.postimg.cc/TPBmVXH1/confetti.png';函数getRandomInt（min，max）{min = Math.ceil（min）; max = Math。 floor（max）; return Math.floor（Math.random（）*（max-min + 1））+ min;}函数resetParticle（粒子，宽度，高度）{粒子颜色=颜色[（Math.random（） * * colors.length）| 0] +（confetti.alpha +））;粒子.color2 = colors [（Math.random（）* colors.length）| 0] +（confetti.alpha +））; particle.x = getRandomInt（0，width）; particle.y = getRandomInt（-height / 2，0 ）;粒子直径= Math.random（）* 10 + 5; particle.tilt = Math.random（）* 10-10; particle.tiltAngleIncrement = Math.random（）* 0.07 + 0.05; particle.tiltAngle = Math.random（）* Math.PI;粒子宽度= Math.random（）* 20粒子高度= Math.random（）* 40返回粒子; }函数toggleConfettiPause（）{如果（暂停）resumeConfetti（）;否则pauseConfetti（）; }函数isConfettiPaused（）{返回暂停； }函数pauseConfetti（）{pause = true; }函数resumeConfetti（）{暂停=否； runAnimation（）; }函数runAnimation（）{如果（暂停）返回；否则if（particles.length === 0）{context.clearRect（0，0，window.innerWidth，window.innerHeight）; animationTimer = null; } else {var now = Date.now（）; var delta = now-lastFrameTime;如果（！supportsAnimationFrame || delta> confetti.frameInterval）{context.clearRect（0，0，window.innerWidth，window.innerHeight）; updateParticles（）; drawParticles（context）; lastFrameTime = now-（delta％confetti.frameInterval）; } animationTimer = requestAnimationFrame（runAnimation）; }}函数startConfetti（timeout，min，max）{var width = window.innerWidth; var height = window.innerHeight; window.requestAnimationFrame =（function（）{返回window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||函数（回调）{返回window.setTimeout（callback，confetti.frameInterval ）;};}）（）; var canvas = document.getElementById（ confetti-canvas）;如果（canvas === null）{canvas = document.createElement（ canvas）; canvas.setAttribute（ id，五彩纸屑画布）; canvas.setAttribute（ style， display：block; z-index：999999; pointer-events：none; position：fixed; top：0）； document.body.prepend（画布）; canvas.width =宽度; canvas.height =高度; window.addEventListener（ resize，function（）{canvas.width = window.innerWidth; canvas.height = window.innerHeight;}，true）； context = canvas.getContext（ 2d）; } else if（context === null）context = canvas.getContext（ 2d）; var count = confetti.maxCount; if（min）{if（max）{if（min == max）count =粒子长度+最大； else {if（min> max）{var temp = min;最小值=最大值;最大=温度; } count = particle.length +（（（Math.random（）*（max-min）+ min）| 0）; }} else count = particle.length + min;否则，如果（max）count =粒子长度+最大值； while（particles.length< count）particle.push（resetParticle（{}，width，height））; StreamingConfetti = true;暂停=假; runAnimation（）; if（timeout）{window.setTimeout（stopConfetti，timeout）; }}函数stopConfetti（）{StreamingConfetti = false; }函数removeConfetti（）{stop（）;暂停=假;粒子= []; }函数toggleConfetti（）{如果（streamingConfetti）stopConfetti（）;否则startConfetti（）; }函数isConfettiRunning（）{返回streamingConfetti; }函数drawParticles（context）{var particle; var x，y，x2，y2; for（var i = 0; i  

  html {高度：100％;} body，html {边距：0;} body {背景：黑色；}


I'm trying to update an existing particle animation. In this demo, the particles are just lines with different lineWidths with random sizes and rotation as they fall down.

My goal is to replace the lines with a different shape, which looks like the image below keeping everything else as is.

I've already changed the shape, but I'm having a couple issues:

  1. It doesn't rotate anymore like in the original demo link posted above.
  2. Since, I replaced the lines with an image of the shape, I'm also facing performance issues if I increase the particles.

  3. If I randomize the size, it keeps updating the size of the shape constantly without keeping the first random size.

    context.drawImage(svg, x, y, 20, 40)
                  |
                  v
context.drawImage(svg, x, y, Math.random() * 20, Math.random() * 40)

Could anybody point me in the right direction on I should go about fixing the above. Appreciate any help!

var confetti = {
  maxCount: 150,     //set max confetti count
  speed: 1,          //set the particle animation speed
  frameInterval: 30, //the confetti animation frame interval in milliseconds
  alpha: 1.0,        //the alpha opacity of the confetti (between 0 and 1, where 1 is opaque and 0 is invisible)
  gradient: false,   //whether to use gradients for the confetti particles
  start: null,       //call to start confetti animation (with optional timeout in milliseconds, and optional min and max random confetti count)
  stop: null,        //call to stop adding confetti
  toggle: null,      //call to start or stop the confetti animation depending on whether it's already running
  pause: null,       //call to freeze confetti animation
  resume: null,      //call to unfreeze confetti animation
  togglePause: null, //call to toggle whether the confetti animation is paused
  remove: null,      //call to stop the confetti animation and remove all confetti immediately
  isPaused: null,    //call and returns true or false depending on whether the confetti animation is paused
  isRunning: null    //call and returns true or false depending on whether the animation is running
};

(function() {
  confetti.start = startConfetti;
  confetti.stop = stopConfetti;
  confetti.toggle = toggleConfetti;
  confetti.pause = pauseConfetti;
  confetti.resume = resumeConfetti;
  confetti.togglePause = toggleConfettiPause;
  confetti.isPaused = isConfettiPaused;
  confetti.remove = removeConfetti;
  confetti.isRunning = isConfettiRunning;
  var supportsAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame;
  var colors = ["rgba(30,144,255,", "rgba(107,142,35,", "rgba(255,215,0,", "rgba(255,192,203,", "rgba(106,90,205,", "rgba(173,216,230,", "rgba(238,130,238,", "rgba(152,251,152,", "rgba(70,130,180,", "rgba(244,164,96,", "rgba(210,105,30,", "rgba(220,20,60,"];
  var streamingConfetti = false;
  var animationTimer = null;
  var pause = false;
  var lastFrameTime = Date.now();
  var particles = [];
  var waveAngle = 0;
  var context = null;

  function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function resetParticle(particle, width, height) {
    particle.color = colors[(Math.random() * colors.length) | 0] + (confetti.alpha + ")");
    particle.color2 = colors[(Math.random() * colors.length) | 0] + (confetti.alpha + ")");
    particle.x = getRandomInt(0, width);
    particle.y = getRandomInt(-height / 2, 0);
    particle.diameter = Math.random() * 10 + 5;
    particle.tilt = Math.random() * 10 - 10;
    particle.tiltAngleIncrement = Math.random() * 0.07 + 0.05;
    particle.tiltAngle = Math.random() * Math.PI;
    return particle;
  }

  function toggleConfettiPause() {
    if (pause)
      resumeConfetti();
    else
      pauseConfetti();
  }

  function isConfettiPaused() {
    return pause;
  }

  function pauseConfetti() {
    pause = true;
  }

  function resumeConfetti() {
    pause = false;
    runAnimation();
  }

  function runAnimation() {
    if (pause)
      return;
    else if (particles.length === 0) {
      context.clearRect(0, 0, window.innerWidth, window.innerHeight);
      animationTimer = null;
    } else {
      var now = Date.now();
      var delta = now - lastFrameTime;
      if (!supportsAnimationFrame || delta > confetti.frameInterval) {
        context.clearRect(0, 0, window.innerWidth, window.innerHeight);
        updateParticles();
        drawParticles(context);
        lastFrameTime = now - (delta % confetti.frameInterval);
      }
      animationTimer = requestAnimationFrame(runAnimation);
    }
  }

  function startConfetti(timeout, min, max) {
    var width = window.innerWidth;
    var height = window.innerHeight;
    window.requestAnimationFrame = (function() {
      return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback) {
          return window.setTimeout(callback, confetti.frameInterval);
        };
    })();
    var canvas = document.getElementById("confetti-canvas");
    if (canvas === null) {
      canvas = document.createElement("canvas");
      canvas.setAttribute("id", "confetti-canvas");
      canvas.setAttribute("style", "display:block;z-index:999999;pointer-events:none;position:fixed;top:0");
      document.body.prepend(canvas);
      canvas.width = width;
      canvas.height = height;
      window.addEventListener("resize", function() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
      }, true);
      context = canvas.getContext("2d");
    } else if (context === null)
      context = canvas.getContext("2d");
    var count = confetti.maxCount;
    if (min) {
      if (max) {
        if (min == max)
          count = particles.length + max;
        else {
          if (min > max) {
            var temp = min;
            min = max;
            max = temp;
          }
          count = particles.length + ((Math.random() * (max - min) + min) | 0);
        }
      } else
        count = particles.length + min;
    } else if (max)
      count = particles.length + max;
    while (particles.length < count)
      particles.push(resetParticle({}, width, height));
    streamingConfetti = true;
    pause = false;
    runAnimation();
    if (timeout) {
      window.setTimeout(stopConfetti, timeout);
    }
  }

  function stopConfetti() {
    streamingConfetti = false;
  }

  function removeConfetti() {
    stop();
    pause = false;
    particles = [];
  }

  function toggleConfetti() {
    if (streamingConfetti)
      stopConfetti();
    else
      startConfetti();
  }

  function isConfettiRunning() {
    return streamingConfetti;
  }

  function drawParticles(context) {
    var particle;
    var x, y, x2, y2;
    for (var i = 0; i < particles.length; i++) {
      particle = particles[i];
      particleWidth = particle.diameter;
      x2 = particle.x + particle.tilt;
      x = x2 + particle.diameter / 2;
      y = particle.y;

      var svg = new Image();
      svg.src = 'https://i.postimg.cc/TPBmVXH1/confetti.png';
      context.drawImage(svg, x, y, 20, 40)

      /*context.beginPath();
      context.lineWidth = particle.diameter;
      x2 = particle.x + particle.tilt;
      x = x2 + particle.diameter / 2;
      y2 = particle.y + particle.tilt + particle.diameter / 2;
      if (confetti.gradient) {
      	var gradient = context.createLinearGradient(x, particle.y, x2, y2);
      	gradient.addColorStop("0", particle.color);
      	gradient.addColorStop("1.0", particle.color2);
      	context.strokeStyle = gradient;
      } else
      	context.strokeStyle = particle.color;
      context.moveTo(x, particle.y);
      context.lineTo(x2, y2);
      context.stroke();*/
    }
  }

  function updateParticles() {
    var width = window.innerWidth;
    var height = window.innerHeight;
    var particle;
    waveAngle += 0.01;
    for (var i = 0; i < particles.length; i++) {
      particle = particles[i];
      if (!streamingConfetti && particle.y < -15)
        particle.y = height + 100;
      else {
        particle.tiltAngle += particle.tiltAngleIncrement;
        particle.x += Math.sin(waveAngle) - 0.5;
        particle.y += (Math.cos(waveAngle) + particle.diameter + confetti.speed) * 0.5;
        particle.tilt = Math.sin(particle.tiltAngle) * 15;
      }
      if (particle.x > width + 20 || particle.x < -20 || particle.y > height) {
        if (streamingConfetti && particles.length <= confetti.maxCount)
          resetParticle(particle, width, height);
        else {
          particles.splice(i, 1);
          i--;
        }
      }
    }
  }
  startConfetti(5000, 20, 25)
})();

html {
  height: 100%;
}

body,
html {
  margin: 0;
}

body {
  background: black;
}

解决方案

Ok so here is what I did:

  1. I changed drawParticles to apply the particle.tilt.
  2. I moved the svg variable to the top so it is reused and not loaded multiple times.
  3. I did set the random size in resetParticle so it does not change afterwards.

var confetti = {
  maxCount: 150,		//set max confetti count
  speed: 1,			//set the particle animation speed
  frameInterval: 30,	//the confetti animation frame interval in milliseconds
  alpha: 1.0,			//the alpha opacity of the confetti (between 0 and 1, where 1 is opaque and 0 is invisible)
  gradient: false,	//whether to use gradients for the confetti particles
  start: null,		//call to start confetti animation (with optional timeout in milliseconds, and optional min and max random confetti count)
  stop: null,			//call to stop adding confetti
  toggle: null,		//call to start or stop the confetti animation depending on whether it's already running
  pause: null,		//call to freeze confetti animation
  resume: null,		//call to unfreeze confetti animation
  togglePause: null,	//call to toggle whether the confetti animation is paused
  remove: null,		//call to stop the confetti animation and remove all confetti immediately
  isPaused: null,		//call and returns true or false depending on whether the confetti animation is paused
  isRunning: null		//call and returns true or false depending on whether the animation is running
};

(function () {
  confetti.start = startConfetti;
  confetti.stop = stopConfetti;
  confetti.toggle = toggleConfetti;
  confetti.pause = pauseConfetti;
  confetti.resume = resumeConfetti;
  confetti.togglePause = toggleConfettiPause;
  confetti.isPaused = isConfettiPaused;
  confetti.remove = removeConfetti;
  confetti.isRunning = isConfettiRunning;
  var supportsAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame;
  var colors = ["rgba(30,144,255,", "rgba(107,142,35,", "rgba(255,215,0,", "rgba(255,192,203,", "rgba(106,90,205,", "rgba(173,216,230,", "rgba(238,130,238,", "rgba(152,251,152,", "rgba(70,130,180,", "rgba(244,164,96,", "rgba(210,105,30,", "rgba(220,20,60,"];
  var streamingConfetti = false;
  var animationTimer = null;
  var pause = false;
  var lastFrameTime = Date.now();
  var particles = [];
  var waveAngle = 0;
  var context = null;
  
  var sizes = []; 
  var svg = new Image();
  
  svg.src = 'https://i.postimg.cc/TPBmVXH1/confetti.png';

  function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function resetParticle(particle, width, height) {
    particle.color = colors[(Math.random() * colors.length) | 0] + (confetti.alpha + ")");
    particle.color2 = colors[(Math.random() * colors.length) | 0] + (confetti.alpha + ")");
    particle.x = getRandomInt(0, width);
    particle.y = getRandomInt(-height / 2, 0);
    particle.diameter = Math.random() * 10 + 5;
    particle.tilt = Math.random() * 10 - 10;
    particle.tiltAngleIncrement = Math.random() * 0.07 + 0.05;
    particle.tiltAngle = Math.random() * Math.PI;
    
    particle.width = Math.random() * 20
    particle.height = Math.random() * 40
    
    return particle;
  }

  function toggleConfettiPause() {
    if (pause)
      resumeConfetti();
    else
      pauseConfetti();
  }

  function isConfettiPaused() {
    return pause;
  }

  function pauseConfetti() {
    pause = true;
  }

  function resumeConfetti() {
    pause = false;
    runAnimation();
  }

  function runAnimation() {
    if (pause)
      return;
    else if (particles.length === 0) {
      context.clearRect(0, 0, window.innerWidth, window.innerHeight);
      animationTimer = null;
    } else {
      var now = Date.now();
      var delta = now - lastFrameTime;
      if (!supportsAnimationFrame || delta > confetti.frameInterval) {
        context.clearRect(0, 0, window.innerWidth, window.innerHeight);
        updateParticles();
        drawParticles(context);
        lastFrameTime = now - (delta % confetti.frameInterval);
      }
      animationTimer = requestAnimationFrame(runAnimation);
    }
  }

  function startConfetti(timeout, min, max) {
    var width = window.innerWidth;
    var height = window.innerHeight;
    window.requestAnimationFrame = (function () {
      return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback) {
          return window.setTimeout(callback, confetti.frameInterval);
        };
    })();
    var canvas = document.getElementById("confetti-canvas");
    if (canvas === null) {
      canvas = document.createElement("canvas");
      canvas.setAttribute("id", "confetti-canvas");
      canvas.setAttribute("style", "display:block;z-index:999999;pointer-events:none;position:fixed;top:0");
      document.body.prepend(canvas);
      canvas.width = width;
      canvas.height = height;
      window.addEventListener("resize", function () {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
      }, true);
      context = canvas.getContext("2d");
    } else if (context === null)
      context = canvas.getContext("2d");
    var count = confetti.maxCount;
    if (min) {
      if (max) {
        if (min == max)
          count = particles.length + max;
        else {
          if (min > max) {
            var temp = min;
            min = max;
            max = temp;
          }
          count = particles.length + ((Math.random() * (max - min) + min) | 0);
        }
      } else
        count = particles.length + min;
    } else if (max)
      count = particles.length + max;
    while (particles.length < count)
      particles.push(resetParticle({}, width, height));
    streamingConfetti = true;
    pause = false;
    runAnimation();
    if (timeout) {
      window.setTimeout(stopConfetti, timeout);
    }
  }

  function stopConfetti() {
    streamingConfetti = false;
  }

  function removeConfetti() {
    stop();
    pause = false;
    particles = [];
  }

  function toggleConfetti() {
    if (streamingConfetti)
      stopConfetti();
    else
      startConfetti();
  }

  function isConfettiRunning() {
    return streamingConfetti;
  }

  function drawParticles(context) {
    var particle;
    var x, y, x2, y2;
    for (var i = 0; i < particles.length; i++) {
      particle = particles[i];
      particleWidth = particle.diameter;
      x2 = particle.x + particle.tilt;
      x = x2 + particle.diameter / 2;
      y = particle.y;

      context.save();
      context.translate(x, y);
      context.rotate(particle.tilt / 180 * Math.PI);
      context.translate(-x, -y);
      context.drawImage(svg, x, y, particle.width, particle.height);
      context.restore();

			/*context.beginPath();
			context.lineWidth = particle.diameter;
			x2 = particle.x + particle.tilt;
			x = x2 + particle.diameter / 2;
			y2 = particle.y + particle.tilt + particle.diameter / 2;
			if (confetti.gradient) {
				var gradient = context.createLinearGradient(x, particle.y, x2, y2);
				gradient.addColorStop("0", particle.color);
				gradient.addColorStop("1.0", particle.color2);
				context.strokeStyle = gradient;
			} else
				context.strokeStyle = particle.color;
			context.moveTo(x, particle.y);
			context.lineTo(x2, y2);
			context.stroke();*/
    }
  }

  function updateParticles() {
    var width = window.innerWidth;
    var height = window.innerHeight;
    var particle;
    waveAngle += 0.01;
    for (var i = 0; i < particles.length; i++) {
      particle = particles[i];
      if (!streamingConfetti && particle.y < -15)
        particle.y = height + 100;
      else {
        particle.tiltAngle += particle.tiltAngleIncrement;
        particle.x += Math.sin(waveAngle) - 0.5;
        particle.y += (Math.cos(waveAngle) + particle.diameter + confetti.speed) * 0.5;
        particle.tilt = Math.sin(particle.tiltAngle) * 15;
      }
      if (particle.x > width + 20 || particle.x < -20 || particle.y > height) {
        if (streamingConfetti && particles.length <= confetti.maxCount)
          resetParticle(particle, width, height);
        else {
          particles.splice(i, 1);
          i--;
        }
      }
    }
  }
  startConfetti(5000, 20, 25)
})();

html {
  height: 100%;
}
body, html {
  margin: 0;
}
body {
  background: black;
}

这篇关于对画布粒子应用随机旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆