當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

canvas 粒子效果 - 手残实践纪录

發布時間：2025/3/17 编程问答 19 豆豆

生活随笔收集整理的這篇文章主要介紹了 canvas 粒子效果 - 手残实践纪录小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

canvas 實踐

粒子效果

首先確定開發的步驟

準備基礎的 html 跟 css 當背景

初始化 canvas

準備一個粒子類 Particle

編寫粒子連線的函數 drawLine

編寫動畫函數 animate

添加鼠標和觸摸移動事件、resize事件

離屏渲染優化、手機端的模糊處理

準備基礎的 html 跟 css 當背景

來這個網址隨便找個你喜歡的漸變色

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><meta name="format-detection" content="email=no"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="format-detection" content="telephone=no"/><meta name="renderer" content="webkit"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="apple-mobile-web-app-title" content="Amaze UI"/><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/><meta http-equiv="Pragma" content="no-cache"/><meta http-equiv="Expires" content="0"/><title>canvas-粒子效果</title> </head> <body><style>html,body {margin:0;overflow:hidden;width:100%;height:100%;background: #B993D6; background: -webkit-linear-gradient(to left, #8CA6DB, #B993D6); background: linear-gradient(to left, #8CA6DB, #B993D6); }</style><script src="hidpi-canvas.min.js"></script><script src="canvas-particle.js"></script> </body> </html> 復制代碼

這樣之后你就得到了一個純凈的背景

初始化 canvas

首先準備一個可以將 context 變成鏈式調用的方法

// 鏈式調用 function Canvas2DContext(canvas) {if (typeof canvas === "string") {canvas = document.getElementById(canvas)}if (!(this instanceof Canvas2DContext)) {return new Canvas2DContext(canvas)}this.context = this.ctx = canvas.getContext("2d")if (!Canvas2DContext.prototype.arc) {Canvas2DContext.setup.call(this, this.ctx)} } Canvas2DContext.setup = function() {var methods = ["arc", "arcTo", "beginPath", "bezierCurveTo", "clearRect", "clip","closePath", "drawImage", "fill", "fillRect", "fillText", "lineTo", "moveTo","quadraticCurveTo", "rect", "restore", "rotate", "save", "scale", "setTransform","stroke", "strokeRect", "strokeText", "transform", "translate"]var getterMethods = ["createPattern", "drawFocusRing", "isPointInPath", "measureText", // drawFocusRing not currently supported// The following might instead be wrapped to be able to chain their child objects"createImageData", "createLinearGradient","createRadialGradient", "getImageData", "putImageData"]var props = ["canvas", "fillStyle", "font", "globalAlpha", "globalCompositeOperation","lineCap", "lineJoin", "lineWidth", "miterLimit", "shadowOffsetX", "shadowOffsetY","shadowBlur", "shadowColor", "strokeStyle", "textAlign", "textBaseline"]for (let m of methods) {let method = mCanvas2DContext.prototype[method] = function() {this.ctx[method].apply(this.ctx, arguments)return this}}for (let m of getterMethods) {let method = mCanvas2DContext.prototype[method] = function() {return this.ctx[method].apply(this.ctx, arguments)}}for (let p of props) {let prop = pCanvas2DContext.prototype[prop] = function(value) {if (value === undefined){return this.ctx[prop]}this.ctx[prop] = valuereturn this}} } 復制代碼

接下來寫一個 ParticleCanvas 函數

const ParticleCanvas = window.ParticleCanvas = function(){const canvasreturn canvas } const canvas = ParticleCanvas() console.log(canvas) 復制代碼

ParticleCanvas 方法可能會接受很多參數

首先第一個參數必然是 id 啦，不然你怎么獲取到 canvas。
還有寬高參數，我們把 canvas 處理一下寬高。
可以使用 ES6 的函數默認參數跟解構賦值的方法。
準備一個 init 方法初始化畫布

const ParticleCanvas = window.ParticleCanvas = function({id = "p-canvas",width = 0,height = 0 }){//這里是獲取到 canvas 對象，如果沒獲取到我們就自己創建一個插入進去const canvas = document.getElementById(id) || document.createElement("canvas")if(canvas.id !== id){ (canvas.id = id) && document.body.appendChild(canvas)}//通過調用上面的方法來獲取到一個可以鏈式操作的上下文const context = Canvas2DContext(canvas)//這里默認的是網頁窗口大小，如果傳入則取傳入的值width = width || document.documentElement.clientWidthheight = height || document.documentElement.clientHeight//準備一個 init() 方法初始化畫布const init = () => {canvas.width = widthcanvas.height = height}init()return canvas } const canvas = ParticleCanvas({}) console.log(canvas) 復制代碼

寫完之后就變成這樣了

準備一個粒子類 Particle

接下來我們磨刀霍霍向粒子了，通過觀察動畫效果我們可以知道，首先這個核心就是粒子，且每次出現的隨機的粒子，所以解決了粒子就可以解決了這個效果的 50% 啊。那我們就開始來寫這個類

我們先來思考一下，這個粒子類，目前最需要哪些參數初始化它

第一個當然是，繪制上下文 context
然后，這個粒子實際上其實就是畫個圓，畫圓需要什么參數？
- arc(x, y, radius, startAngle, endAngle, anticlockwise)
前三個怎么都要傳進來吧，不然你怎么保證每個粒子實例大小和位置不一樣呢
頭腦風暴結束后我們目前確定了四個參數 context x y r
所謂萬丈高樓平地起要畫一百個粒子，首先先畫第一個粒子

class Particle {constructor({context, x, y, r}){context.beginPath().fillStyle("#fff").arc(x, y, r, 0, Math.PI * 2).fill().closePath()} } //準備一個 init() 方法初始化畫布 const init = () => {canvas.width = widthcanvas.height = heightconst particle = new Particle({context,x: 100,y: 100,r: 10}) } init() 復制代碼

好的，你成功邁出了第一步

我們接下來思考現在我們的需求是畫 N 個隨機位置隨機大小的粒子，那要怎么做呢

首先，我們可以通過一個循環去繪制一堆粒子
只要傳值是隨機的，那，不就是，隨機的粒子嗎！
隨機的 x y 應該在屏幕內，而大小應該在一個數值以內
說寫就寫，用 Math.random 不就解決需求了嗎

const init = () => {canvas.width = widthcanvas.height = heightfor (let i = 0; i < 50; i++) {new Particle({context,x: Math.random() * width,y: Math.random() * height,r: Math.round(Math.random() * (10 - 5) + 10)})} } init() 復制代碼

好的，隨機粒子也被我們擼出來了

接下來還有個問題，這樣直接寫雖然可以解決需求，但是其實不易于擴展。

每次我們調用 Particle 類的構造函數的時候，我們就去繪制，這就顯得有些奇怪。
我們需要另外準備一個類的內部方法，讓它去負責繪制，而構造函數存儲這些參數值，各司其職
然后就是我們初始化的粒子，我們需要拿一個數組來裝住這些粒子，方便我們的后續操作
然后機智的你又發現了，我們為什么不傳個顏色，透明度進去讓它更隨機一點
我們確定了要傳入 parColor ，那我們分析一波這個參數，你有可能想傳入的是一個十六進制的顏色碼，也可能傳一個 rgb 或者 rgba 形式的，我們配合透明度再來做處理，那就需要另外一個轉換的函數，讓它統一轉換一下。
既然你都能傳顏色值了，那支持多種顏色不也是手到擒來的事情，不就是傳個數組進去么？
確定完需求就開寫。

/*16進制顏色轉為RGB格式傳入顏色值和透明度 */ const color2Rgb = (str, op) => {const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/let sColor = str.toLowerCase()// 如果不傳，那就隨機透明度op = op || (Math.floor(Math.random() * 10) + 4) / 10 / 2let opStr = `,${op})`// 這里使用惰性返回，就是存儲一下轉換好的，萬一遇到轉換過的就直接取值if (this[str]) {return this[str] + opStr}if (sColor && reg.test(sColor)) {// 如果是十六進制顏色碼if (sColor.length === 4) {let sColorNew = "#"for (let i = 1; i < 4; i += 1) {sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))}sColor = sColorNew}//處理六位的顏色值 let sColorChange = []for (let i = 1; i < 7; i += 2) {sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)))}let result = `rgba(${sColorChange.join(",")}`this[str] = resultreturn result + opStr}// 不是我就不想管了return sColor } // 獲取數組中隨機一個值 const getArrRandomItem = (arr) => arr[Math.round(Math.random() * (arr.length - 1 - 0) + 0)]//函數添加傳入的參數 const ParticleCanvas = window.ParticleCanvas = function({id = "p-canvas",width = 0,height = 0,parColor = ["#fff","#000"],parOpacity,maxParR = 10, //粒子最大的尺寸minParR = 5, //粒子最小的尺寸 }){...let particles = []class Particle {constructor({context, x, y, r, parColor, parOpacity}){this.context = contextthis.x = xthis.y = y this.r = rthis.color = color2Rgb(typeof parColor === "string" ? parColor : getArrRandomItem(parColor), parOpacity) // 顏色this.draw()}draw(){this.context.beginPath().fillStyle(this.color).arc(this.x, this.y, this.r, 0, Math.PI * 2).fill().closePath()}}//準備一個 init() 方法初始化畫布const init = () => {canvas.width = widthcanvas.height = heightfor (let i = 0; i < 50; i++) {particles.push(new Particle({context,x: Math.random() * width,y: Math.random() * height,r: Math.round(Math.random() * (maxParR - minParR) + minParR),parColor,parOpacity}))}}init()return canvas } 復制代碼

接下來你的頁面就會長成這樣子啦，基礎的粒子類已經寫好了，接下來我們先把連線函數編寫一下

drawLine

兩個點要如何連成線？我們查一下就知道，要通過調用 moveTo(x, y) 和 lineTo(x,y)

觀察效果，思考一下連線的條件，我們發現在一定的距離兩個粒子會連成線
首先線的參數就跟粒子的是差不多的，需要線寬 lineWidth, 顏色 lineColor, 透明度 lineOpacity
那其實是不是再通過雙層循環來調用 drawLine 就可以讓他們彼此連線
drawLine 其實就需要傳入另一個粒子進去，開搞

現在我們就得到一個連線的粒子了，接下來我們就要讓我們的頁面動起來了

animate

首先我們要認識到，canvas是通過我們編寫的那些繪制函數繪制上去的，那么，我們如果使用一個定時器，定時的去繪制，不就是動畫的基本原理了么

首先我們要寫一個 animate 函數，把我們的邏輯寫進去，然后讓定時器 requestAnimationFrame 去執行它

requestAnimationFrame是瀏覽器用于定時循環操作的一個接口，類似于setTimeout，主要用途是按幀對網頁進行重繪。

設置這個API的目的是為了讓各種網頁動畫效果（DOM動畫、Canvas動畫、SVG動畫、WebGL動畫）能夠有一個統一的刷新機制，從而節省系統資源，提高系統性能，改善視覺效果。代碼中使用這個API，就是告訴瀏覽器希望執行一個動畫，讓瀏覽器在下一個動畫幀安排一次網頁重繪。

看不明白的話，那你就把他當成一個不用你去設置時間的 setInterval
那我們要通過動畫去執行繪制，粒子要動起來，我們必須要再粒子類上再擴展一個方法 move ,既然要移動了，那上下移動的偏移量必不可少 moveX 和 moveY
邏輯分析完畢，開炮

如果沒有意外，你的頁面應該動起來啦，是不是感覺很簡單呢

添加鼠標和觸摸移動事件

接下來我們要來添加鼠標和觸摸移動的效果了

首先鼠標移動會有一個粒子跟隨，我們單獨初始化一個孤單的粒子出來 currentParticle，這個粒子跟上來自己動的妖艷賤貨不一樣的點在于，currentParticle 的位置，我們需要通過監聽事件返回的鼠標位置賦值給它，是的，這個需要你讓他動。
既然是個獨特的粒子，那么樣式也要支持自定義啦 isMove(是否開啟跟隨) targetColor targetPpacity targetR 看你也知道是什么意思啦，不解釋了。
resize 事件是監聽瀏覽器窗口尺寸變化，這樣子在用戶變化尺寸的時候，我們的背景就不會變得不和諧
實現的思路主要是通過監聽 resize 事件，重新調用一波 init 方法，來重新渲染畫布，由于 resize 這個在事件在變化的時候回調非常的頻繁，頻繁的計算會影響性能，嚴重可能會卡死，所以我們通過防抖 debounce 或者節流 throttle 的方式來限制其調用。
了解完思路，那就繼續寫啦

/* 保留小數 */ const toFixed = (a, n) => parseFloat(a.toFixed(n || 1)) //節流，避免resize占用過多資源 const throttle = function (func,wait,options) {var context,args,timeoutvar previous = 0options = options || {}// leading：false 表示禁用第一次執行// trailing: false 表示禁用停止觸發的回調var later = function(){previous = options.leading === false ? 0 : new Date().getTime()timeout = nullfunc.apply(context, args)}var throttled = function(){var now = +new Date()if (!previous && options.leading === false) {previous = now}// 下次觸發 func 的剩余時間var remaining = wait - (now - previous)context = thisargs = arguments// 如果沒有剩余的時間了或者你改了系統時間if(remaining > wait || remaining <= 0){if (timeout) {clearTimeout(timeout)timeout = null}previous = nowfunc.apply(context, args)}else if(!timeout && options.trailing !== false){timeout = setTimeout(later, remaining)}}throttled.cancel = function() {clearTimeout(timeout)previous = 0timeout = null}return throttled } //防抖，避免resize占用過多資源 const debounce = function(func,wait,immediate){//防抖//定義一個定時器。var timeout,resultvar debounced = function() {//獲取 thisvar context = this//獲取參數var args = arguments//清空定時器if(timeout){clearTimeout(timeout)}if(immediate){//立即觸發，但是需要等待 n 秒后才可以重新觸發執行var callNow = !timeoutconsole.log(callNow)timeout = setTimeout(function(){timeout = null}, wait)if (callNow) {result = func.apply(context, args)}}else{//觸發后開始定時，timeout = setTimeout(function(){func.apply(context,args)}, wait)}return result}debounced.cancel = function(){// 當immediate 為 true，上一次執行后立即，取消定時器，下一次可以實現立即觸發if(timeout) {clearTimeout(timeout)}timeout = null}return debounced } const ParticleCanvas = window.ParticleCanvas = function({id = "p-canvas",width = 0,height = 0,parColor = ["#fff"],parOpacity,maxParR = 10, //粒子最大的尺寸minParR = 5, //粒子最小的尺寸lineColor = "#fff",lineOpacity,lineWidth = 1,moveX = 0,moveY = 0,isMove = true,targetColor = ["#000"],targetPpacity = 0.6,targetR = 10, }){let currentParticle,isWResize = width,isHResize = height,myReq = nullclass Particle {...}//動畫函數const animate = () => {//每次調用要首先清除畫布，不然你懂的context.clearRect(0, 0, width, height)for (let i = 0; i < particles.length; i++) {//粒子移動particles[i].move()for (let j = i + 1; j < particles.length; j++) {//粒子連線particles[i].drawLine(particles[j])}}/** * 這個放在外面的原因* 我不開啟isMove的時候，或者currentParticle.x 沒有值的情況* 放在上面的循環需要每次走循環都判斷一次* 而放在下面的話只需要執行一次就知道有沒有必要再執行 N 次* 當然你也可以放里面，問題也不大*/if (isMove && currentParticle.x) {for (let i = 0; i < particles.length; i++) {currentParticle.drawLine(particles[i])}currentParticle.draw()}myReq = requestAnimationFrame(animate)}//準備一個 init() 方法初始化畫布const init = () => {canvas.width = widthcanvas.height = height//獨立粒子if (isMove && !currentParticle) {currentParticle = new Particle({x: 0,y: 0, r: targetR, parColor: targetColor, parOpacity: targetPpacity,lineColor,lineOpacity, lineWidth,context}) //獨立粒子const moveEvent = (e = window.event) => {//改變 currentParticle 的 x ycurrentParticle.x = e.clientX || e.touches[0].clientXcurrentParticle.y = e.clientY || e.touches[0].clientY}const outEvent = () => {currentParticle.x = currentParticle.y = null}const eventObject = {"pc": {move: "mousemove",out: "mouseout"},"phone": {move: "touchmove",out: "touchend"}}const event = eventObject[/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ? "phone" : "pc"]canvas.removeEventListener(event.move,moveEvent)canvas.removeEventListener(event.out, outEvent)canvas.addEventListener(event.move,moveEvent)canvas.addEventListener(event.out, outEvent)}//自由粒子for (let i = 0; i < 50; i++) {particles.push(new Particle({context,x: Math.random() * width,y: Math.random() * height,r: Math.round(Math.random() * (maxParR - minParR) + minParR),parColor,parOpacity,lineWidth, lineColor, lineOpacity,moveX,moveY,}))}//執行動畫animate()/*這個判斷在于，假設用戶只需要一個 500*500 的畫布的時候。其實是不需要 resize 的而用戶如果只是輸入其中一個值，另一個值自適應，則認為其需要 resize。如果全部都自適應，那則肯定是需要 resize 的此邏輯是我自己瞎想的，其實不用也行，只是我覺得這樣更符合我自己的需求。全部 resize 也是可以的。*/if(!isWResize || !isHResize){window.addEventListener("resize",debounce(resize, 100))}}const resize = () => {//清除定時器if(this.timeout){clearTimeout(this.timeout)}//清除 AnimationFrameif(myReq){window.cancelAnimationFrame(myReq)}//清空粒子數組particles = []//設置新的寬高width = isWResize ? width : document.documentElement.clientWidthheight = isHResize ? height : document.documentElement.clientHeightthis.timeout = setTimeout(init, 20)}init()return canvas } 復制代碼

寫到這里，這個東西差不多啦，接下來就是優化的問題了

離屏渲染優化和手機端的模糊處理

離屏渲染

其實是指用離屏canvas上預渲染相似的圖形或重復的對象，簡單點說就是，你現在其他canvas對象上畫好，然后再通過 drawImage() 放進去目標畫布里面

我們需要提供一個方法，用于離屏渲染粒子，用于生成一個看不見的 canvas 然后在上面畫畫畫
最好能夠提供一下緩存用過的 canvas 用于節省空間性能，提高復用率
畫的時候要注意，提供一個倍數，然后再縮小，看上去就比較清晰
這里的注意點是，理解這種渲染方式，以及倍數之間的關系

//離屏緩存 const getCachePoint = (r,color,cacheRatio) => {let key = r + "cache" + color//緩存一個 canvas 如果遇到相同的，直接從緩存取if(this[key]){return this[key]}//離屏渲染const _ratio = 2 * cacheRatio,width = r * _ratio,cacheCanvas = document.createElement("canvas"),cacheContext = Canvas2DContext(cacheCanvas)cacheCanvas.width = cacheCanvas.height = widthcacheContext.save().fillStyle(color).arc(r * cacheRatio, r * cacheRatio, r, 0, 360).closePath().fill().restore()this[key] = cacheCanvasreturn cacheCanvas }const ParticleCanvas = window.ParticleCanvas = function({...useCache = true //新增一個useCache表示是否開啟離屏渲染 }){...class Particle {constructor({context, x, y, r, parColor, parOpacity, lineWidth, lineColor, lineOpacity, moveX, moveY, useCache}){...this.ratio = 3this.useCache = useCache}draw(){if(this.useCache){this.context.drawImage(getCachePoint(this.r,this.color,this.ratio), this.x - this.r * this.ratio, this.y - this.r * this.ratio)}else{this.context.beginPath().fillStyle(this.color).arc(toFixed(this.x), toFixed(this.y), toFixed(this.r), 0, Math.PI * 2).fill().closePath()}}...}...//準備一個 init() 方法初始化畫布const init = () => {...if (isMove && !currentParticle) {currentParticle = new Particle({...useCache}) //獨立粒子...}//自由粒子for (let i = 0; i < 50; i++) {particles.push(new Particle({...useCache}))}...}... } 復制代碼

高清屏的模糊處理

因為 canvas 繪制的圖像并不是矢量圖，而是跟圖片一樣的位圖，所以在高 dpi 的屏幕上看的時候，就會顯得比較模糊，比如蘋果的 Retina 屏幕，它會用兩個或者三個像素來合成一個像素，相當于圖被放大了兩倍或者三倍，所以自然就模糊了

我們可以通過引入 hidpi-canvas.min.js 來處理在手機端高清屏繪制變得模糊的問題

這個插件的原理是通過這個方法來獲取 dpi

getPixelRatio = (context) => {var backingStore = context.backingStorePixelRatio ||context.webkitBackingStorePixelRatio ||context.mozBackingStorePixelRatio ||context.msBackingStorePixelRatio ||context.oBackingStorePixelRatio ||context.backingStorePixelRatio || 1return (window.devicePixelRatio || 1) / backingStore } 復制代碼

然后通過放大畫布，再通過CSS的寬高縮小畫布

//兼容 Retina 屏幕 const setRetina = (canvas,context,width,height) => {var ratio = getPixelRatio(context)ratio = 2if(context._retinaRatio && context._retinaRatio !== ratio){window.location.reload()}canvas.style.width = width * ratio + "px"canvas.style.height = height * ratio + "px"// 縮放繪圖context.setTransform(ratio, 0, 0, ratio, 0, 0)canvas.width = width * ratiocanvas.height = height * ratiocontext._retinaRatio = ratioreturn ratio } 復制代碼

這個方法通過處理是可以兼容好手機模糊的問題，但是在屏幕比較好的電腦屏幕感覺還是有點模糊，所以我就改造了一下...

如果是手機端，放大三倍，電腦端則放大兩倍，再縮小到指定大小
需要注意的是，drawImage 的倍數關系
如果有更好更優雅的辦法，希望能交流一下

寫到這里基本也就寫完了...

溜了溜了

轉載于:https://juejin.im/post/5bf506576fb9a049a62c329a

總結

以上是生活随笔為你收集整理的canvas 粒子效果 - 手残实践纪录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。