最近閑來無事，便去研究canvas，因為canvas可以實作很多炫麗的動畫效果，是以就想研究一番，正好看見網上有哥們實作了一個類似的粒子效果，覺得挺不錯的，于是乎自己就動手也寫了一個。好了，話不多說，直接看效果吧。
效果圖
canvas實作粒子塗鴉效果
HTML源碼
<!DOCTYPE html>
<html>
<head >
<meta charset="UTF-8">
<title>粒子特效</title>
<style>
html , body {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
}
#myCanvas {
background-color: #000;
cursor: crosshair;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script src="../js/particle.js"></script>
</body>
</html>
particle.js 源碼
/**
* Created by 004928 on 2017/8/2.
*/
(function (window) {
window.requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ;
window.cancelRequestAnimationFrame =
window.cancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame ;
var w , h ; // 畫布寬高
var particles = []; // 粒子集合
var temp = [];
var points = []; // 每個粒子坐标對象的集合
var delayTime = 2000 ; // 位移動畫執行的延遲時間
var maxRadius = 7 ; // 粒子圓的最大半徑
var animationIncrement = 0.08 ; // 粒子縮放時的增減量
var offsetY = 7 , offsetX = 7 ; // x , y 軸每隔7個像素點取值
var speed = 20 ; // 粒子運動速度
// 粒子顔色庫
var colors = [
'#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
'#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50',
'#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
'#FF5722'
];
var down = false , move = false ;
var requestId , timeId;
var canvas = null ;
var ctx = null ;
/**
* 初始化canvas
*/
function initCanvas() {
canvas = document.getElementById("myCanvas");
w = window.innerWidth ;
h = window.innerHeight ;
canvas.setAttribute('width', w);
canvas.setAttribute('height', h);
if(canvas.getContext) {
ctx = canvas.getContext('2d');
bindEvent();
}
}
/**
* cnavas 綁定事件
*/
function bindEvent() {
canvas.addEventListener('mousedown' , function (e) {
down = true ;
stopAnimation();
});
canvas.addEventListener('mousemove' , function (e) {
if(down) {
move = true ;
drawPath({
x:e.offsetX ,
y:e.offsetY
});
}
});
canvas.addEventListener('mouseup' , function (e) {
down = false ;
if(move) {
throttle(graffiti , window);
}
move = false ;
});
}
/**
* 塗鴉
*/
function graffiti () {
initParticle();
randomDraw();
start();
points = [] ;
}
/**
* 節流函數
*/
function throttle (method , context) {
clearTimeout(method.tId);
method.tId = setTimeout(function () {
method.call(context);
} , delayTime);
}
/**
* 繪制路徑
*/
function drawPath (point) {
points.push(point);
ctx.fillStyle = '#fff';
ctx.beginPath();
ctx.arc(point.x , point.y , Math.floor(Math.random() * maxRadius + 1) , 0 , 2 * Math.PI);
ctx.fill();
}
/**
* 初始化粒子個數
*/
function initParticle () {
particles = [] ;
temp = [] ;
// 拿到畫布的所有像素點資訊
// 每個像素點包含了rgba 四個值，
// 而這個pxData是一個一維數組,每4位儲存一個像素點資訊
var pxData = ctx.getImageData(0 , 0 , w , h);
// 将4位表示的像素點資訊，轉化為1位來表示，
// 即數組中的每個元素表示一個像素
var buffer32 = new Uint32Array(pxData.data.buffer);
// 找到數組中有像素資訊的點，并建立粒子
// 因為數組是一維數組，j * w + i 計算目前周遊的數組下标
for(var j = 0 ; j < h ; j += offsetY) {
for(var i = 0 ; i < w ; i += offsetX) {
if(buffer32[ j * w + i]) {
particles.push(new Particles(i , j , colors[i % colors.length]));
// 在移動粒子的時候需要用到
temp.push(new Particles(0 , 0 , colors[i % colors.length]));
}
}
}
}
/**
* 首先随機繪制在螢幕上
*/
function randomDraw () {
ctx.clearRect( 0 , 0 , w , h);
for(var l = 0 ; l < temp.length ; l ++) {
var p = temp[l];
setRadius(p);
if(p.x == 0) p.x = randomInteger(w);
if(p.y == 0) p.y = randomInteger(h);
draw(p);
}
requestId = requestAnimationFrame(randomDraw);
}
/**
* 随機産生 1 - max 之間的整數
* @param max
* @returns {number}
*/
function randomInteger (max) {
return Math.floor(Math.random() * max + 1);
}
/**
* 粒子對象
*/
function Particles (x , y , color) {
this.x = x ;
this.y = y ;
this.color = color ; // 粒子顔色
this.r = Math.floor(Math.random() * maxRadius + 1); // 随機産生粒子的半徑 1 - 5
this.zoom = Math.floor(Math.random() * 2) == 0 ? -1 : 1 ; // 0 表示縮小，1表示放大
}
/**
* 循環執行動畫
*/
function loop () {
ctx.clearRect( 0 , 0 , w , h);
for(var l = 0 ; l < particles.length ; l ++) {
var p = particles[l];
var t = temp[l];
calcPosition(p , t);
setRadius(t);
draw(t);
}
requestId = requestAnimationFrame(loop);
}
/**
* 2s 之後 聚合成要顯示的文本樣式
*/
function start () {
timeId = setTimeout(function () {
cancelRequestAnimationFrame(requestId);
loop();
} , delayTime);
}
/**
* 設定粒子的半徑（遞增/遞減）
*/
function setRadius (p) {
if(p.zoom > 0) {
p.r += animationIncrement ;
if(p.r >= maxRadius ) p.zoom = -1 ;
} else {
p.r -= animationIncrement ;
if(p.r <= 1) p.zoom = 1 ;
}
}
/**
* 計算粒子的位置
*/
function calcPosition (p , t) {
var vx = ( p.x - t.x ) / speed ;
var vy = ( p.y - t.y ) / speed ;
t.x += vx ;
t.y += vy ;
if(vx > 0) {
if(t.x >= p.x ) t.x = p.x ;
} else {
if(t.x <= p.x ) t.x = p.x ;
}
if(vy > 0) {
if(t.y >= p.y ) t.y = p.y ;
} else {
if(t.y <= p.y ) t.y = p.y ;
}
}
/**
* 繪制粒子
* @param t
*/
function draw (t) {
ctx.fillStyle = t.color;
ctx.beginPath();
ctx.arc(t.x , t.y , t.r , 0 , 2 * Math.PI);
ctx.fill();
}
/**
* 停止動畫
*/
function stopAnimation () {
if(requestId || timeId) {
cancelRequestAnimationFrame(requestId);
clearTimeout(timeId);
requestId = timeId = null ;
ctx.clearRect(0 , 0 , w, h);
}
}
window.onload = initCanvas ;
})(window);
原理
其實這個特效主要分為兩個部分
- 1.粒子本身的縮放
- 2.粒子位置的移動
粒子本身的縮放
其實每個粒子本身就是一個圓，隻要改變每次改變圓的半徑從大到小，再從小到大，就可以實作縮放的效果
粒子位置的移動
首先記錄繪制在界面上粒子的位置，然後再随機顯示在界面上，然後再計算此時的粒子距離之前粒子的位置
計算之間的距離，然後移動過去即可。
其實原理比較簡單，下面來解讀下源碼！
源碼解析
其實主要的邏輯在 initParticle 方法，通過 ctx.getImageData 拿到畫布上所有的像素點資訊
得到的資料是一個一維數組，且每4個資料表示一個像素點資訊比如 [0,0,0,1 ,0,2,3,0] ,我們可以看到
這個數組中有8個值,那麼前面4個值表示第一個像素點資訊，後面4個表示第二個像素點資訊。
且4個值分别對應 r , g , b , a 這四個值。
然後通過 Uint32Array 方法将4位表示一個像素點資訊的資料，變成1位表示一個像素點的數組
是以上面8位的數組就變[001100 , 003300](資料我是瞎編的，忽略)
然後周遊轉換後的數組，凡是有值的，就是出現在界面上的點（大家可以在canvas上寫段文字，然後列印ctx.getImageData擷取到的資料便知）
for(var j = 0 ; j < h ; j += offsetY) {
for(var i = 0 ; i < w ; i += offsetX) {
if(buffer32[ j * w + i]) {
particles.push(new Particles(i , j , colors[i % colors.length]));
// 在移動粒子的時候需要用到
temp.push(new Particles(0 , 0 , colors[i % colors.length]));
}
}
}
如上，即可拿到所有繪制在界面上的粒子，因為數組是一維的，而粒子要繪制在界面上是需要X,Y坐标的，
所有這裡用兩層for循環，來得到每個粒子的x,y坐标
- offsetX，offsetY 橫豎每次間隔多少像素才去取資料，這樣出來的粒子才會排列不一
基本上拿到粒子之後，然後随機繪制在界面上，詳見 randomDraw 方法
然後循環執行 loop 方法，周遊每個粒子，計算位置，設定半徑，即可看到效果。
主要的邏輯都在particle.js中，其他方法都比較簡單，主要是initParticle方法中的邏輯。
另外，js代碼我沒有怎去去封裝了，勿吐槽。
Github 源碼下載下傳
![web前端布局練手項目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)