動的効率粒子JavaScriptのボタンを達成するために

HTML：

<ボタン>ボタン</ボタン>

CSS：

ボタン{ 
  最小幅：100pxに。
  最大幅：150ピクセル; 
  分の高さ：40ピクセル; 
  ボーダー：0; 
  概要：0; 
  色：白; 
  背景：＃ee0979。
  背景：線形勾配（右へ、＃ee0979、＃ff6a00）。
  
  垂直整列：トップ。
} 
ボタン{ 
  カーソル：ポインタ。
}

JavaScriptを：

VAR BTN = document.querySelector（ "ボタン"）; 
VaRのCTX; 
VAR colorInfoElem = document.querySelector（ "＃colorInfo"）; 
html2canvas（BTN）.then（キャンバス=> { 
  CTX = canvas.getContext（ "2D"）; 
  createParticleCanvas（）; 
  せreductionFactor = 17; 
  btn.addEventListener（ "クリック"、E => { 
    //の色データを取得します私たちのボタンは、
    幅= btn.offsetWidthてみましょう。
    聞かせて高さ= btn.offsetHeightは
    色データ= ctx.getImageData（0、0、幅、高さ）.dataセクションを聞かせて、
    カウントが0ましょう。
    localXプロパティ<幅;（localXプロパティ= 0を聞かせてためlocalXプロパティ++ ）{ 
      ため（LETとlocalY = 0;とlocalY <高さ;とlocalY ++）{  
        IF（数％reductionFactor === 0）{
          せ指数=（とlocalY *幅+ localXプロパティ）* 4。
          rgbaColorArr = colorData.slice（インデックス、インデックス+ 4）とします。

          ）（BCR = btn.getBoundingClientRectてみましょう。
          globalX = bcr.left + localXプロパティましょう。
          グローバルに= bcr.top +とlocalYてみましょう。

          createParticleAtPoint（globalX、グローバルに、rgbaColorArr）。
        } 
        ++数えます。
      } 
    } 
  }）。
}）; 
VAR ExplodingParticle =機能（）{ 
  //設定どのくらい我々はのためのアニメーションに私たちの粒子たい
  this.animationDuration = 1000; // MSにおける

  //セット我々の粒子のための速度
  this.speed = {  
    X：-5 + Math.random（）* 10、
    Y：-5 + Math.random（）* 10 
  }。
  
  //サイズ私たちの粒子
  this.radius = 5 + Math.random（）* 5。
  
  //設定し、当社の粒子のために生きるための最大時間
  this.life = 30 + Math.random（）は* 10。
  this.remainingLife = this.life。
  
  //この関数は、後に私たちのアニメーションロジックによって呼び出されます
  this.draw = CTX => { 
    せたp =この; 

    （this.remainingLife> 0の場合
    && this.radius> 0）{ 
      //現在の位置で円を描く
      ctx.beginPath（）。
      ctx.arc（p.startX、p.startY、p.radius、0、にMath.PI * 2）。
      ctx.fillStyle = "RGBA（" + this.rgbArray [0] + '' + this.rgbArray [1] + '' + this.rgbArray [2] + "1）"。
      ctx.fill（）;  
      p.remainingLife--。
      P。
      
      //更新粒子の位置と生活
      p.startX + = p.speed.x。
      p.startY + = p.speed.y。
    } 
  } 
} 

VAR粒子= []; 
関数createParticleAtPoint（X、Y、色データ）{ 
  粒子が=新しいExplodingParticle（LET）。
  particle.rgbArray =色データ; 
  particle.startX = X。
  particle.startY = Y。
  particle.startTime = Date.now（）。
  
  particles.push（粒子）。
} 


VARのparticleCanvas、particleCtx。
関数createParticleCanvas（）{ 
  //は、私たちのキャンバスを作成
  particleCanvas =のdocument.createElement（ "キャンバス"）; 
  particleCtx = particleCanvas.getContext（ "2D"）。
   
  //サイズ私たちのキャンバス
  particleCanvas.width = window.innerWidthを。
  particleCanvas.height = window.innerHeight。
  
  //キャンバスアウトポジション 
  particleCanvas.style.position =「絶対」。
  particleCanvas.style.top = "0"; 
  particleCanvas.style.left = "0"; 
  
  //必ず、それは他の要素の上のmake 
  particleCanvas.style.zIndex =「1001」; 
  
  //その下に他の要素がクリック可能であることを確認してください
  particleCanvas.style.pointerEvents =「なし」。
  
  //ページへの私たちのキャンバスを追加
  document.body.appendChild（particleCanvas）。
} 
{機能更新（）
  //クリア古い粒子アウト
  するif（typeof演算particleCtx！== " 
    particleCtx.clearRect（0、0、window.innerWidth、window.innerHeight）。
  } 
  //新しい場所で私たちのすべての粒子を描く
  {（;; I <particles.length私++ I = 0ましょう）について
    粒子[I] .draw（particleCtx）。
    
    最後粒子が完了アニメーションであればクリーンアップする//簡単な方法
    { - （1 I === particles.length）場合
      せパーセント=（Date.now（） -粒子[I] .startTime）/粒子[I]。 animationDuration; 
      
      {（パーセント> 1）であれば
        、粒子= []; 
      } 
    } 
  } 
  window.requestAnimationFrame（更新）。
} 
window.requestAnimationFrame（更新）。

また、オンラインhtml2canvasリンクですhtml2canvasのJSの導入が必要です。

http://html2canvas.hertzen.com/

効果はCSSのポイントよりわずかに優れています！

動的効率粒子JavaScriptのボタンを達成するために

おすすめ