炒雞簡單的canvas粒子

山鬼發表於2018-04-25
原文網址 : https://juejin.im/post/5ae05ef6518825670e5cbcde
Canvas

要說canvas中最精妙的地方，那應該就是對畫素操作的能力了，可能這也就是為什麼作為點陣圖的canvas一直不會被svg比下去的原因了。 俗話說，須彌芥子，是大小之說，也有以小見大之說，顆顆粒子，足以構建巨集大效果。 這是一篇炒雞簡單的canvas粒子教程，主要是講如何粒子特效的原理，一點運動中的公式。

有所準備

首先，當我們知道要做粒子的效果的時候，我們要思考我們如何來實現，而且還要儘可能的面對我們親愛的物件，於是便有了如下的思考。

  1. 要有粒子
  2. 粒子在運動，運動就需要速度
  3. 勻速運動/變速運動
  4. 運動之外還需要哪些處理

全域性中的永恆

這裡我定義了時間與粒子生成的數量，還有一個粒子池。

也許會很奇怪，我們在運動的過程中每一幀都是時間，為什麼還要再設定這個時間，瀏覽器的渲染可以被看作正常流逝的時間，這裡的time則是相對時間 如果感覺暈暈的，

這裡可以舉個小李子：

光在世界中沿直線傳播，你現在所能看到的月光是很久之前的月光，這就說明很久之前的月光一直在傳播，同時也意味著你的一切動作都還在傳播的過程中，只要你的速度足夠快，就可以追上你的過去。

開個小玩笑了，其實time的意思就是你的1s對於小球而言是2s,瀏覽器渲染設定的時間只是為了讓你的視覺上看不出影象的卡頓

const time=2;
const num=20;
var dots=[];
複製程式碼

粒子類

function dot(x,y,vx,vy){
  //接收粒子點的座標與方向速度量
  this.x=x;
  this.y=y;
  this.vx=vx;
  this.vy=vy;
  //隨機粒子大小
  this.size=Math.ceil(Math.random()*3+2);
  this.ctx={};
}
  //粒子渲染
dot.prototype.render = function(ctx) {
  ctx.save();
  this.ctx=ctx;
  this.ctx.beginPath();
  this.ctx.fillStyle='lightgray';
  this.ctx.arc(this.x-this.size/2,this.y-this.size/2,this.size,0,Math.PI*2);
  this.ctx.closePath();
  this.ctx.fill();
  ctx.restore();
};
  //對當前粒子屬性做邏輯計算
dot.prototype.update = function() {
  this.ctx.clearRect(0,0,canvas.width,canvas.heihgt);
  this.x=this.x+this.vx*time;
  this.y=this.y+this.vy*time;
  this.vx = (this.x < canvas.width && this.x > 0) ? this.vx : (-this.vx);
  this.vy = (this.y < canvas.height && this.y > 0) ? this.vy : (-this.vy);
  this.render(this.ctx);
};
複製程式碼

在當前粒子類中，我只給了速度的方向量，因為我們只要求粒子做勻速運動，這裡的計算公式則是x=vt(x:位移 v:平均速度 t:運動時間)

如果要對粒子施加力或者變速運動，則需要this.a=a來新增一個加速度的屬性。然後根據加速度的方向做水平與垂直的分解，並且對速度的方向量產生作用，從而進行變速運動，這裡的公式如下

  1. v=at
  2. x=(v0+at/2)*t
    v0為初速度，a為加速度的方向量，x為方向上的位移

炒雞簡單的canvas粒子

禍亂世界的粒子

for(let i=0;i<num;i++){
  var x=Math.ceil(Math.random()*canvas.width);
  var y=Math.ceil(Math.random()*canvas.height);
  var vx=Math.ceil(Math.random()*2);
  var vy=Math.ceil(Math.random()*2);
  var d=new dot(x,y,vx,vy);
  d.render(ctx);
  dots.push(d);
}
複製程式碼

通過對canvas的寬高進行隨機取整來獲取隨機的座標點。並且例項化我們的粒子。並且推入粒子池中。 這裡因為我們在update方法中會直接呼叫render，所以我們只需要在例項化的時候執行一次render將ctx環境傳入，後面就可以全部交給update來完成了。

躁動吧 粒子球

requestAnimFrame(anim);
function anim(){
  for(let i=0;i<dots.length;i++){
      dots[i].update();
  }
  requestAnimFrame(anim);
}
複製程式碼

這裡我們只需要對粒子池中的粒子進行資料持續更新，就可以讓粒子們跑起來了。

粒子的教程比較簡單，但確是幾乎所有粒子效果的依託，粒子已經可以生成，那麼只需要讓粒子在我們的規定路徑上運動，就可以達到我們所需要的效果了。

炒雞簡單的canvas粒子

擴充思維

  1. 知乎背景的網狀效果

    遍歷所有粒子點，如果在範圍內，則使用moveTo與llineTo來生成連線線。

  2. 粒子成字

    將文字先繪製在離屏canvas上，然後返回所有不透明畫素點的座標，遍歷時可以直接遍歷，也可以使用width與height來計算，如果當前點需要繪製，就生成粒子。

    這裡說到畫素點不透明，是因為在canvas上，你只要不設定，預設是不存在背景色，也就說，所有繪製的所有畫素都可以通過判斷其alpha值是否為0來判斷，也可以通過設定alpha的閾值來將一些填充度不夠的點給扔除。比如說當alpha對應為128的時候，透明度約為0.5，這也是為什麼很多人的部落格裡都用到了128這個判斷值。

    還有很多的效果，粒子特效是一個很大的話題，如AE Unity等軟體中都會有內建的粒子外掛與外接的大量粒子效果外掛。

後面還會寫一些有些高度的粒子效果

不定期更新canvas與svg的相關技術教程，有實戰型，也會有主原理型的，2d 2.5d 3d都會包含到，同時涉及的有 線性代數 物理 圖形學等相關的基礎知識。

本次demo原始碼：粒子效果

歡迎各位客官收藏關注，投硬幣餵養。

同時感謝大家為我提出文中的不足與問題~

相關文章