一直覺(jué)得前端是一件能把“手藝感”做出來(lái)的事。早先逛創(chuàng)意社區(qū)時(shí)看到有人用純代碼把畫筆觸感、布料紋理、紙張褶皺模擬得惟妙惟肖就覺(jué)得這件事很有意思。前陣子我折騰了一個(gè)叫“artcraft”的小項(xiàng)目本質(zhì)是一個(gè)純前端的交互式藝術(shù)展示頁(yè)面把SVG手繪風(fēng)、CSS逐幀動(dòng)畫、Canvas粒子系統(tǒng)揉在一起做成了一個(gè)小而完整的數(shù)字手作工作臺(tái)。整個(gè)過(guò)程踩了挺多坑也積累了不少可以直接抄作業(yè)的參數(shù)和經(jīng)驗(yàn)今天把整個(gè)思路、選型、實(shí)現(xiàn)過(guò)程和故障排查都拆開講一遍希望對(duì)正在做藝術(shù)類落地頁(yè)、交互動(dòng)效或創(chuàng)意工坊場(chǎng)景的朋友有用。1. 項(xiàng)目定位與整體設(shè)計(jì)思路1.1 artcraft到底想解決什么問(wèn)題單純做一個(gè)“好看的頁(yè)面”其實(shí)不難難的是讓頁(yè)面在視覺(jué)上有“手作感”。普通的Web頁(yè)面追求的是清晰、高效用戶進(jìn)來(lái)能快速找到信息但藝術(shù)類項(xiàng)目恰恰相反它希望用戶慢下來(lái)去觀察、去觸摸、去感受。這種感受不是靠一張靜態(tài)圖撐起來(lái)的而是靠一連串微小的交互反饋累積出來(lái)的。artcraft的出發(fā)點(diǎn)很簡(jiǎn)單我想做一個(gè)模擬真實(shí)手工創(chuàng)作場(chǎng)景的Web體驗(yàn)。頁(yè)面里有一塊虛擬畫板用戶可以用鼠標(biāo)或觸摸在畫板上“涂抹”但落筆的軌跡不是普通的光滑線條而是帶紋理、帶顆粒、帶輕微抖動(dòng)的手繪質(zhì)感。同時(shí)畫板周圍會(huì)散落一些類似真實(shí)工作臺(tái)的小物件——木質(zhì)色卡、布料樣本、筆刷圖標(biāo)它們會(huì)有輕微懸浮和陰影變化讓整個(gè)場(chǎng)景像是一個(gè)實(shí)體的手工工作臺(tái)被搬到了瀏覽器里。這個(gè)項(xiàng)目解決的另一個(gè)問(wèn)題是“技術(shù)上的輕量”。很多類似的效果一上來(lái)就引入重型3D引擎或大體積動(dòng)畫庫(kù)結(jié)果頁(yè)面加載慢、低端機(jī)上卡成幻燈片。artcraft的全部核心效果只用原生JavaScript加少量SVG和Canvas實(shí)現(xiàn)整個(gè)資源體積控制在很小的量級(jí)部署起來(lái)非常簡(jiǎn)單扔到任意靜態(tài)托管就能跑。1.2 適合哪些人參考如果你屬于下面這幾類人這篇拆解對(duì)你應(yīng)該比較有用正在做作品集或創(chuàng)意落地頁(yè)想讓頁(yè)面有一些“不一樣”的交互體驗(yàn)的設(shè)計(jì)師或前端工程師想用代碼模擬自然質(zhì)感手繪筆觸、顆粒紋理、水墨暈染的創(chuàng)意編程愛(ài)好者給兒童美術(shù)教育或手工類產(chǎn)品做小游戲、小工具的產(chǎn)品經(jīng)理或獨(dú)立開發(fā)者想深入了解SVG、Canvas、CSS濾鏡如何配合使用的初中級(jí)前端學(xué)習(xí)者。完全不建議什么人參考如果你的項(xiàng)目是重業(yè)務(wù)邏輯的后臺(tái)管理系統(tǒng)、數(shù)據(jù)可視化大屏或者對(duì)瀏覽器兼容性要求極其嚴(yán)苛的傳統(tǒng)企業(yè)項(xiàng)目那artcraft這套“重氛圍輕邏輯”的思路就不太適合你。這類效果的核心價(jià)值在于沉浸感和品牌調(diào)性對(duì)功能效率要求極高的場(chǎng)景會(huì)顯得花哨。1.3 整體結(jié)構(gòu)怎么搭整個(gè)artcraft頁(yè)面分為三層底層是靜態(tài)氛圍層主要由漸變色背景、紙質(zhì)紋理疊加層、裝飾性SVG圖形構(gòu)成目的是先把頁(yè)面整體的“材質(zhì)感”建立起來(lái)。中層是交互響應(yīng)層包含畫板區(qū)域、事件監(jiān)聽(tīng)邏輯、粒子系統(tǒng)所有用戶操作產(chǎn)生的反饋都發(fā)生在這個(gè)層級(jí)。頂層是UI控制層包含工具切換按鈕、顏色選擇器、畫筆大小滑塊、清空按鈕以及一個(gè)跟隨光標(biāo)移動(dòng)的小指示器。這個(gè)分層設(shè)計(jì)是刻意為之。三層各司其職底層管視覺(jué)基調(diào)中層管交互邏輯頂層管用戶操作。后續(xù)如果要加功能比如導(dǎo)出圖片、上傳背景圖可以在不破壞其他層的前提下單獨(dú)擴(kuò)展。很多藝術(shù)類項(xiàng)目做著做著就越來(lái)越亂就是因?yàn)橐婚_始沒(méi)把層級(jí)關(guān)系定清楚事件綁定散落在各處后面根本沒(méi)法維護(hù)。2. 核心技術(shù)選型與細(xì)節(jié)拆解2.1 為什么選原生JavaScript而不是框架做交互式藝術(shù)效果第一反應(yīng)很容易是找Three.js、PixiJS這種重裝備。但artcraft的定位決定了它不需要3D不需要復(fù)雜的物理引擎絕大多數(shù)效果用2D Canvas就能完成。這時(shí)候引入重型庫(kù)反而會(huì)帶來(lái)三個(gè)問(wèn)題包體積變大首屏加載變慢用戶等待時(shí)間長(zhǎng)抽象層變厚很多底層的像素級(jí)操作不好精細(xì)控制調(diào)試成本變高出了問(wèn)題需要同時(shí)理解業(yè)務(wù)邏輯和引擎邏輯。用原生JavaScript的好處是把所有控制權(quán)握在自己手里。比如畫筆的紋理生成算法、粒子的運(yùn)動(dòng)軌跡計(jì)算、顏色疊加模式切換這些全是純數(shù)學(xué)和Canvas API的事情直接寫反而更清爽。現(xiàn)代瀏覽器對(duì)Canvas 2D的優(yōu)化已經(jīng)相當(dāng)好2D繪圖性能完全夠用。具體到技術(shù)選型我用了以下幾組基礎(chǔ)能力Canvas 2D API作為畫板核心負(fù)責(zé)線條繪制和粒子渲染SVG實(shí)現(xiàn)裝飾圖形和工具圖標(biāo)因?yàn)镾VG是矢量任意縮放不糊做圖標(biāo)和裝飾圖形天然合適CSS Filter實(shí)現(xiàn)畫面整體色調(diào)調(diào)整對(duì)比度、飽和度、亮度以及部分紋理顆粒感的疊加原生PointerEvent接口統(tǒng)一處理鼠標(biāo)和觸摸事件免去分別監(jiān)聽(tīng)鼠標(biāo)事件和觸摸事件的麻煩。2.2 紋理筆刷的實(shí)現(xiàn)原理手繪感最大的秘密是“不均勻”。真實(shí)的畫筆落在紙上墨跡的深淺、寬窄、顆粒分布都有隨機(jī)差異。如果直接用ctx.lineTo畫一條固定粗細(xì)、固定顏色的線那看起來(lái)就是一根塑料管子毫無(wú)生命力。模擬思路分兩步。第一步是抖動(dòng)在鼠標(biāo)移動(dòng)的路徑上每隔一段距離插入一個(gè)點(diǎn)并對(duì)點(diǎn)的位置施加一個(gè)細(xì)微的、隨時(shí)間變化的隨機(jī)偏移。偏移量控制在一定范圍內(nèi)比如2-4像素視覺(jué)上就會(huì)產(chǎn)生“手不穩(wěn)”的輕微抖動(dòng)感。第二步是紋理用離屏Canvas生成一張筆刷紋理圖上面隨機(jī)分布著大小不一的半透明圓點(diǎn)繪制時(shí)使用ctx.globalCompositeOperation的疊加混合模式讓紋理與畫布底色互相融合形成類似干墨、水彩擴(kuò)散的邊界感。這里有一個(gè)關(guān)鍵參數(shù)紋理顆粒的密度和大小。密度太大畫出來(lái)像砂紙粗糙得過(guò)分密度太小效果又微弱得看不出。我反復(fù)調(diào)了幾組值最終在顆粒半徑0.5-2.5像素、密度每100平方像素約15-25個(gè)、透明度0.1-0.3這個(gè)區(qū)間找到比較自然的平衡。顆粒大小和透明度可以跟著當(dāng)前畫筆大小聯(lián)動(dòng)調(diào)節(jié)大筆刷用大顆粒小筆刷用小顆粒手感更有層次。2.3 粒子系統(tǒng)的輕量化設(shè)計(jì)頁(yè)面右上角有一塊裝飾性的粒子背景模擬的是微光浮塵飄散的效果。粒子系統(tǒng)如果是那種動(dòng)輒上千個(gè)對(duì)象的實(shí)現(xiàn)方式在低端手機(jī)上會(huì)很吃力。artcraft里把粒子數(shù)量限制在80個(gè)以內(nèi)并且用“對(duì)象池”模式復(fù)用粒子實(shí)例避免頻繁創(chuàng)建和銷毀造成性能抖動(dòng)。每個(gè)粒子只有六個(gè)屬性x坐標(biāo)、y坐標(biāo)、半徑、透明度、水平速度、垂直速度。每幀更新的時(shí)候x加水平速度y加垂直速度并加上一個(gè)正弦波形的微量偏移。粒子運(yùn)行到邊界時(shí)直接回彈不做復(fù)雜邊界檢測(cè)。整個(gè)更新邏輯代碼量很少但效果很穩(wěn)定。2.4 SVG在氛圍塑造上的巧用Canvas適合做動(dòng)態(tài)部分但靜態(tài)裝飾用Canvas就是殺雞用牛刀。artcraft里所有的靜態(tài)裝飾圖形比如工作臺(tái)邊角的藤蔓花紋、工具面板上的圖標(biāo)、背景里的幾何分割線全部用SVG描述。SVG的好處是可以直接內(nèi)聯(lián)在HTML里不額外發(fā)請(qǐng)求而且可以通過(guò)CSS控制描邊動(dòng)畫、透明度變化方便實(shí)現(xiàn)“靜態(tài)圖形活起來(lái)”的效果。舉個(gè)例子頁(yè)面左下角有一組三條曲線組成的抽象山水圖案。每條曲線都是一個(gè)SVG path描邊設(shè)置了stroke-dasharray和stroke-dashoffset配合CSS動(dòng)畫讓線條有一種“正在被一筆一畫繪制”的錯(cuò)覺(jué)。這種手繪線條動(dòng)畫在SVG里實(shí)現(xiàn)成本極低但視覺(jué)效果好得超出預(yù)期是artcraft里性價(jià)比最高的一個(gè)裝飾元素。3. 實(shí)操過(guò)程與核心功能實(shí)現(xiàn)3.1 從零搭建畫板核心模塊先定義畫板和畫筆的基本結(jié)構(gòu)。最基礎(chǔ)的部分是Canvas元素的獲取、2D上下文的初始化以及狀態(tài)管理對(duì)象。const canvas document.getElementById(drawing-board); const ctx canvas.getContext(2d, { alpha: false }); const boardState { isDrawing: false, currentTool: brush, // brush / marker / eraser brushSize: 18, brushColor: #5b4a46, points: [] };畫布尺寸需要適配容器和屏幕。這里有個(gè)經(jīng)驗(yàn)值藝術(shù)類畫板通常需要比可視區(qū)域稍微大一些給用戶一種“畫布在延伸”的錯(cuò)覺(jué)。我用的辦法是讀取容器寬高后乘以1.2倍再通過(guò)CSS把畫布限制在容器內(nèi)顯示這樣既保證了繪制分辨率又不會(huì)撐破布局。事件綁定部分直接上PointerEvent。PointerEvent的好處是鼠標(biāo)、觸摸、筆都能統(tǒng)一處理不用分別寫mouse和touch兩套邏輯代碼量直接少了一半。canvas.addEventListener(pointerdown, startDraw); canvas.addEventListener(pointermove, moveDraw); canvas.addEventListener(pointerup, endDraw); canvas.addEventListener(pointerleave, endDraw);注意一個(gè)細(xì)節(jié)需要調(diào)用canvas.setPointerCapture(e.pointerId)這樣即使鼠標(biāo)移出畫布區(qū)域也能繼續(xù)接收移動(dòng)事件畫線不會(huì)突然斷掉。不設(shè)這個(gè)的話畫到畫布邊緣再快速拖拽軌跡會(huì)出現(xiàn)斷點(diǎn)。3.2 手繪線條的繪制邏輯核心是drawLine函數(shù)。它讀取當(dāng)前點(diǎn)和上一個(gè)點(diǎn)之間的中間點(diǎn)在中間點(diǎn)位置施加入隨機(jī)抖動(dòng)后用紋理筆刷繪制。一次移動(dòng)距離過(guò)長(zhǎng)時(shí)需要插值補(bǔ)點(diǎn)不然線條會(huì)出現(xiàn)折線感。我來(lái)回測(cè)試后確定每2-3像素插入一個(gè)插值點(diǎn)比較合適。function drawLine(from, to, size, color) { const distance Math.hypot(to.x - from.x, to.y - from.y); const steps Math.max(1, Math.floor(distance / 2.5)); for (let i 0; i steps; i) { const t i / steps; const x from.x (to.x - from.x) * t randomJitter(size * 0.18); const y from.y (to.y - from.y) * t randomJitter(size * 0.18); paintStamp(x, y, size, color); } }這里的randomJitter不是簡(jiǎn)單的Math.random()均勻分布而是采用了一種近似高斯分布的方式取多個(gè)隨機(jī)數(shù)的平均值。這樣抖動(dòng)值更集中在中心范圍偶爾才出現(xiàn)較大的偏移行為更貼近真實(shí)手繪的“穩(wěn)定中帶變化”。function randomJitter(radius) { let sum 0; for (let i 0; i 4; i) { sum Math.random(); } return (sum / 4 - 0.5) * 2 * radius; }這個(gè)方法叫中心極限定理的樸素應(yīng)用做藝術(shù)效果時(shí)很好用。如果用均勻分布抖動(dòng)會(huì)顯得過(guò)于“電子”線條邊緣太均勻用高斯式抖動(dòng)后線條邊緣的顆粒分布有了天然的聚散感非常接近真實(shí)粉筆或蠟筆的質(zhì)感。3.3 畫筆紋理和顏色疊加的秘密畫筆核心是離屏Canvas預(yù)制的紋理。我會(huì)先創(chuàng)建一個(gè)小的Canvas例如64x64像素在上面隨機(jī)生成顆粒然后用這個(gè)離屏Canvas作為“印章”在鼠標(biāo)路徑上不斷蓋章。function createBrushTexture(size, color) { const offCanvas document.createElement(canvas); offCanvas.width size; offCanvas.height size; const offCtx offCanvas.getContext(2d); const colorRgb hexToRgb(color); for (let i 0; i 40; i) { const x Math.random() * size; const y Math.random() * size; const r Math.random() * 2 0.3; const alpha Math.random() * 0.6 0.1; offCtx.beginPath(); offCtx.arc(x, y, r, 0, Math.PI * 2); offCtx.fillStyle rgba(${colorRgb.r}, ${colorRgb.g}, ${colorRgb.b}, ${alpha}); offCtx.fill(); } return offCanvas; }真正畫的時(shí)候用ctx.drawImage把紋理重復(fù)蓋在路徑上并通過(guò)globalAlpha和globalCompositeOperation控制疊加效果。想讓畫出的顏色像水彩一樣透亮就用multiply混合想讓像油畫顏料一樣厚重就用默認(rèn)的source-over疊加上少量透明度。經(jīng)驗(yàn)總結(jié)疊加混合模式是低成本實(shí)現(xiàn)高級(jí)質(zhì)感的核心工具。在‘multiply’模式下顏色會(huì)與已有畫面做乘法混合深色越多疊加處越深天然形成水彩那種層次暈染的效果。不需要去寫復(fù)雜的著色器原生Canvas就可以支持。3.4 工具切換與狀態(tài)管理artcraft的工具面板有畫筆、馬克筆、橡皮擦、噴槍四種。它們本質(zhì)上都是同一個(gè)繪圖引擎只是參數(shù)不同。我把工具配置抽象成了一個(gè)配置對(duì)象切換工具就是切配置。工具紋理顆粒密度抖動(dòng)強(qiáng)度透明度混合模式畫筆高中0.3multiply馬克筆低低0.6source-over橡皮擦中高1.0destination-out噴槍高中0.12source-over這里最需要注意的是橡皮擦。橡皮擦不能用“涂白”來(lái)模擬因?yàn)楫嫴嫉咨皇羌儼锥怯屑垙埣y理的米黃色。正確做法是把globalCompositeOperation設(shè)置為destination-out真正把像素的alpha通道擦掉。這樣才能透出底下的紙張紋理層視覺(jué)上才是真實(shí)的橡皮擦效果。狀態(tài)管理我沒(méi)有用任何狀態(tài)管理庫(kù)就是一個(gè)簡(jiǎn)單的plain object加一個(gè)renderToolPanel方法。工具面板的UI狀態(tài)選中高亮、滑塊值變化時(shí)手動(dòng)更新DOM。這個(gè)體量的項(xiàng)目狀態(tài)管理庫(kù)完全是累贅手動(dòng)更新反而直觀不容易出錯(cuò)。3.5 導(dǎo)出功能的小坑與解決導(dǎo)出畫作是美術(shù)工具最基本的功能。一開始我直接調(diào)canvas.toDataURL()結(jié)果導(dǎo)出圖片缺失了背景紋理整張圖畫是一片透明底。原因很簡(jiǎn)單背景紋理層是獨(dú)立的DOM元素或另一個(gè)Canvas不在主Canvas里。解決方案是做一個(gè)離屏合成Canvas先把背景紋理畫上去再把主畫布畫上去最后才toDataURL。順序不能錯(cuò)紋理必須在最底層。function exportArtwork() { const exportCanvas document.createElement(canvas); exportCanvas.width canvas.width; exportCanvas.height canvas.height; const exportCtx exportCanvas.getContext(2d); exportCtx.drawImage(textureLayer, 0, 0); exportCtx.drawImage(canvas, 0, 0); const link document.createElement(a); link.download artcraft-export.png; link.href exportCanvas.toDataURL(image/png); link.click(); }另外導(dǎo)出的圖片格式方面如果畫面有大面積的半透明疊加效果用PNG如果畫面內(nèi)容密集、色彩豐富可以用JPEG把體積壓下來(lái)。PNG和JPEG的權(quán)衡點(diǎn)在于是否保留透明度以及可接受的體積。4. 常見(jiàn)問(wèn)題與排查技巧實(shí)錄4.1 為什么畫出來(lái)的線是一段一段的不連續(xù)這個(gè)坑我剛開始時(shí)經(jīng)常遇到。表現(xiàn)在快速移動(dòng)鼠標(biāo)時(shí)線條會(huì)斷成數(shù)段不連貫。排查后發(fā)現(xiàn)問(wèn)題在事件觸發(fā)頻率和插值邏輯上。瀏覽器pointermove事件的觸發(fā)頻率本身是有限制的與刷新率相關(guān)兩個(gè)事件點(diǎn)之間距離可能很大。如果只在事件點(diǎn)上畫圖當(dāng)然會(huì)斷。解決辦法就是在drawLine里做插值。上面代碼里我已經(jīng)寫了對(duì)應(yīng)邏輯。插值步長(zhǎng)固定的情況下距離越遠(yuǎn)補(bǔ)的中間點(diǎn)越多線條越連續(xù)。但步長(zhǎng)也不是越小越好步長(zhǎng)太細(xì)會(huì)導(dǎo)致一筆畫里執(zhí)行上千次drawImage性能直接拉胯。2.5像素是我在普通設(shè)備上反復(fù)測(cè)試出來(lái)的平衡值。4.2 低端設(shè)備上粒子動(dòng)畫掉幀嚴(yán)重粒子動(dòng)畫由requestAnimationFrame驅(qū)動(dòng)每幀循環(huán)更新所有粒子的位置和繪制。最初我寫了120個(gè)粒子桌面端跑得很順暢結(jié)果用一臺(tái)中低端手機(jī)測(cè)試時(shí)掉幀明顯。原因有兩個(gè)一是粒子數(shù)量太多二是繪制時(shí)每幀都調(diào)用了陰影效果陰影在Canvas里是性能殺手。優(yōu)化方案粒子數(shù)量降到80個(gè)去掉陰影繪制改用徑向漸變的圓形模擬光暈。徑向漸變雖然也不是零成本但比陰影便宜一個(gè)數(shù)量級(jí)。同時(shí)當(dāng)檢測(cè)到設(shè)備幀率持續(xù)低于45fps時(shí)就自動(dòng)再降一半粒子數(shù)量。這個(gè)自適應(yīng)降載邏輯對(duì)移動(dòng)端體驗(yàn)至關(guān)重要。function autoReduceIfSlow() { const fps calculateCurrentFps(); if (fps 45 particles.length MIN_PARTICLE_COUNT) { particles.length Math.floor(particles.length * 0.6); } }效果上80個(gè)粒子和120個(gè)粒子其實(shí)肉眼很難看出差別但性能差距卻實(shí)打?qū)嵉胤从吃趲噬?。這種“扛得住”的優(yōu)化比堆特效重要得多。4.3 SVG動(dòng)畫在部分瀏覽器上不生效裝飾性SVG線條動(dòng)畫用到了stroke-dasharray和stroke-dashoffset配合CSS的animation。在大多數(shù)瀏覽器上沒(méi)問(wèn)題但某天用戶反饋說(shuō)線條動(dòng)畫沒(méi)播檢查后在某個(gè)舊版本的WebView上發(fā)現(xiàn)CSS動(dòng)畫寫在style標(biāo)簽內(nèi)SVG在HTML內(nèi)聯(lián)解析順序?qū)е聞?dòng)畫沒(méi)有應(yīng)用。解決方案是給SVG的path元素加上style屬性內(nèi)聯(lián)樣式或者用JavaScript操作getTotalLength()動(dòng)態(tài)設(shè)置stroke-dasharray和stroke-dashoffset。如果必須兼容老環(huán)境我建議直接用JS驅(qū)動(dòng)反而更可靠還能在動(dòng)畫結(jié)束時(shí)觸發(fā)回調(diào)方便做后續(xù)邏輯。4.4 圖片導(dǎo)出顏色變暗了一個(gè)色號(hào)有用戶反饋導(dǎo)出的圖片比屏幕上看起來(lái)顏色更深。這個(gè)問(wèn)題的根源是Canvas的色彩空間和顯示設(shè)備的色彩管理差異。Canvas繪圖時(shí)的顏色值在線性空間和sRGB空間之間轉(zhuǎn)換導(dǎo)出后再顯示會(huì)有一點(diǎn)點(diǎn)偏差尤其在半透明疊加比較多的時(shí)候會(huì)更明顯。這個(gè)問(wèn)題很難100%消除因?yàn)樯使芾硎菫g覽器底層的事。緩解辦法是設(shè)計(jì)時(shí)就避免使用極端飽和或極端深的顏色把顏色值集中在中等明度區(qū)域。另一個(gè)方法是導(dǎo)出前對(duì)像素做一次伽馬校正。比如在getImageData后手動(dòng)調(diào)整RGB值。不過(guò)要注意調(diào)整會(huì)讓導(dǎo)出速度變慢不推薦在移動(dòng)端做。我更推薦第一種方法——從源頭控制顏色范圍。4.5 觸摸設(shè)備上畫布會(huì)跟著頁(yè)面滾動(dòng)在手機(jī)上測(cè)試手指在畫布上涂抹時(shí)頁(yè)面會(huì)跟著滾動(dòng)完全沒(méi)法畫畫。這是事件默認(rèn)行為的鍋。解決方法有兩個(gè)雙管齊下更保險(xiǎn)在canvas上設(shè)置CSS屬性touch-action: none告訴瀏覽器這個(gè)區(qū)域內(nèi)觸摸行為由頁(yè)面自行處理不執(zhí)行滾動(dòng)在pointermove事件處理函數(shù)里調(diào)用e.preventDefault()阻斷默認(rèn)行為。先做touch-action再做preventDefault。只做前者的話某些老瀏覽器的WebView可能不認(rèn)只做后者的話滾動(dòng)還是有可能在事件觸發(fā)前發(fā)生。兩個(gè)一起上兼容性最好。4.6 常見(jiàn)問(wèn)題速查表把上面排查經(jīng)驗(yàn)濃縮成速查表方便開發(fā)時(shí)快速定位問(wèn)題現(xiàn)象可能原因解決入口線條斷斷續(xù)續(xù)事件采樣點(diǎn)間距大未插值路徑插值補(bǔ)點(diǎn)步長(zhǎng) 2-3px頁(yè)面跟著畫布滾動(dòng)缺少touch-action 或 preventDefaultCSS touch-action:none 加 preventDefault導(dǎo)出圖缺少背景背景層不在主Canvas內(nèi)導(dǎo)出前離屏Canvas合成多層畫面掉幀嚴(yán)重粒子過(guò)多或使用了陰影粒子降量徑向漸變替代陰影橡皮擦變成白底畫布底層是米色紋理使用destination-out擦除alpha手繪感不足抖動(dòng)為均勻分布過(guò)于“電子”改高斯式抖動(dòng)取多個(gè)隨機(jī)數(shù)平均值SVG動(dòng)畫不播CSS動(dòng)畫解析順序或兼容問(wèn)題改用JS驅(qū)動(dòng)stroke-dashoffset4.7 獨(dú)家避坑心得除了上面這些還有幾條純粹靠踩坑換來(lái)的經(jīng)驗(yàn)值得單獨(dú)拿出來(lái)說(shuō)。第一紋理筆刷的離屏Canvas不要每次繪制時(shí)重新創(chuàng)建。把紋理緩存在一個(gè)Map里以“畫筆大小顏色”為key用的時(shí)候直接取。不然高頻繪制時(shí)頻繁創(chuàng)建Canvas對(duì)象會(huì)導(dǎo)致內(nèi)存抖動(dòng)和明顯的卡頓。第二監(jiān)聽(tīng)窗口的resize事件時(shí)最好做防抖。不然用戶拖動(dòng)瀏覽器窗口改變大小時(shí)Canvas在短時(shí)間內(nèi)被反復(fù)重設(shè)尺寸內(nèi)存里還沒(méi)來(lái)得及釋放的像素緩沖會(huì)瞬間拉高內(nèi)存占用嚴(yán)重時(shí)頁(yè)面直接崩掉。我用了一個(gè)300毫秒的防抖穩(wěn)定很多。第三顏色選擇器的實(shí)現(xiàn)看起來(lái)簡(jiǎn)單其實(shí)有坑。普通input[typecolor]彈出的系統(tǒng)取色器在iframe環(huán)境和跨域場(chǎng)景下會(huì)有兼容問(wèn)題而且樣式極難統(tǒng)一。artcraft里我自己做了色板預(yù)置了36個(gè)手工感強(qiáng)的常用色外加一個(gè)可拖拽的飽和度/明度選擇面板。這個(gè)體量的色板完全夠用還能保證整體視覺(jué)風(fēng)格統(tǒng)一不會(huì)讓用戶挑出一個(gè)非常突兀的熒光色。5. 玩法擴(kuò)展與二次開發(fā)建議5.1 畫板之外還能加什么artcraft的架構(gòu)足夠簡(jiǎn)單擴(kuò)展起來(lái)不費(fèi)勁。如果要繼續(xù)往里加?xùn)|西我按性價(jià)比排個(gè)優(yōu)先級(jí)一種是做作品畫廊模式把用戶畫過(guò)的作品存儲(chǔ)到IndexedDB在頁(yè)面下方以瀑布流展示并支持一鍵重新編輯。這樣產(chǎn)品就從“工具”變成了“社區(qū)”。一種是做時(shí)間軸回放把每一次繪制操作的坐標(biāo)、大小、顏色、時(shí)間戳記錄下來(lái)就能像錄屏一樣回放創(chuàng)作過(guò)程。不少用戶喜歡看這個(gè)過(guò)程做成短視頻導(dǎo)出很有傳播潛力。一種是加卷積濾鏡把畫的圖形做高斯模糊、銳化、邊緣檢測(cè)等處理。Canvas有g(shù)etImageData和putImageData濾鏡實(shí)現(xiàn)不算難但畫面效果會(huì)一下子專業(yè)很多。5.2 把playground變成桌面工具如果你覺(jué)得這個(gè)項(xiàng)目在瀏覽器里玩還不夠可以考慮用Electron包裝成桌面應(yīng)用。Canvas在Electron里的性能表現(xiàn)和瀏覽器基本一致導(dǎo)出文件可以直接落到本地磁盤不需要下載。再搭配系統(tǒng)級(jí)的快捷鍵和右鍵菜單體驗(yàn)會(huì)上一個(gè)臺(tái)階。不過(guò)我不建議一上來(lái)就上Electron因?yàn)榇虬w積會(huì)大不少。先確認(rèn)需求確實(shí)需要桌面端再做不遲。5.3 復(fù)用這套架構(gòu)做其他場(chǎng)景artcraft的分層思路其實(shí)是通用的。底層氛圍層、中層交互響應(yīng)層、頂層UI控制層這個(gè)思路不僅適合畫畫做音樂(lè)可視化、數(shù)據(jù)涂鴉、文字排版游戲等創(chuàng)意項(xiàng)目都可以用。有個(gè)朋友當(dāng)時(shí)看了這個(gè)項(xiàng)目后把它改成了一個(gè)詩(shī)歌排版工具底層換成紙張紋理中層換成拍子打點(diǎn)頂層保留自己的色板與導(dǎo)出功能。底層是原有的基礎(chǔ)紋理中層換成了音符跳動(dòng)頂層加上了主題風(fēng)格設(shè)置。兩三天就出了一個(gè)完全不同風(fēng)格的作品。這就是三層解耦架構(gòu)的價(jià)值——每一層都可以獨(dú)立替換成新的創(chuàng)意載體。6. 性能優(yōu)化與發(fā)布部署細(xì)節(jié)6.1 循環(huán)和內(nèi)存管理Canvas動(dòng)畫涉及requestAnimationFrame循環(huán)循環(huán)里最忌諱的是每幀創(chuàng)建新對(duì)象。粒子對(duì)象、插值點(diǎn)數(shù)組、臨時(shí)Canvas這些如果每幀都new很快就會(huì)觸發(fā)垃圾回收造成幀率波動(dòng)。我的做法是盡量復(fù)用粒子初始化后不再銷毀只是重置屬性插值點(diǎn)數(shù)組在drawLine開始時(shí)用array.length 0清空而不是重新創(chuàng)建紋理Canvas放入緩存Map重復(fù)使用。如果以后項(xiàng)目再擴(kuò)大可以考慮用OffscreenCanvas把繪制邏輯移到Worker線程避免主線程卡頓。不過(guò)artcraft這個(gè)體量暫時(shí)用不上加了反而增加邏輯復(fù)雜度。6.2 資源體積控制和加載體驗(yàn)整個(gè)項(xiàng)目靜態(tài)資源很小但也有一個(gè)優(yōu)化細(xì)節(jié)值得講背景的紙張紋理圖片如果不壓縮可能1MB以上。我用Canvas重繪了一個(gè)程序化紋理代碼里生成噪點(diǎn)加漸變替代了圖片資源。這樣加載體積降為零還能任意縮放在不同尺寸下保持清晰。頁(yè)面加載策略方面首屏優(yōu)先渲染靜態(tài)裝飾層和粒子背景這兩部分視覺(jué)占比最大。畫板核心邏輯按需初始化——具體說(shuō)是等用戶首次觸碰到畫布時(shí)才創(chuàng)建Canvas上下文和緩存紋理。這樣首屏白屏?xí)r間能明顯縮短。代碼上只需要判斷一個(gè)isInit標(biāo)記就可以。6.3 部署時(shí)的幾個(gè)小動(dòng)作artcraft是純靜態(tài)項(xiàng)目部署上幾乎沒(méi)什么門檻。但有幾個(gè)細(xì)節(jié)我要提一下。靜態(tài)資源服務(wù)器記得開啟gzipCSS和JS文件能壓掉不少體積如果你用了Canvas導(dǎo)出圖片注意跨域問(wèn)題。背景紋理如果是程序化生成的不存在跨域如果用了外部圖片需要設(shè)置crossOriginanonymous不然toDataURL會(huì)拋SecurityError移動(dòng)端適配要關(guān)注設(shè)備像素比。Canvas的寬度和高度要乘以devicePixelRatio不然在2倍屏上畫出來(lái)的線條會(huì)發(fā)虛。const dpr window.devicePixelRatio || 1; canvas.width cssWidth * dpr; canvas.height cssHeight * dpr; ctx.scale(dpr, dpr);這段代碼基本是所有Canvas項(xiàng)目的標(biāo)配了。不做的話高分屏上畫面糊成一片線條邊緣全是鋸齒做了之后在Retina屏幕上也有細(xì)膩的筆觸。7. 寫在最后的經(jīng)驗(yàn)之談artcraft這個(gè)項(xiàng)目做完最大的收獲是認(rèn)識(shí)到“手作感”是一個(gè)系統(tǒng)工程不是靠某一段特效代碼就能達(dá)成的。它需要三個(gè)層面一起配合材質(zhì)要真實(shí)交互要跟手反饋要即時(shí)。材質(zhì)靠紋理和顏色疊加交互靠插值和抖動(dòng)算法反饋靠粒子動(dòng)畫和微交互。任何一層缺位整體感覺(jué)都會(huì)打折扣。一個(gè)我自己反復(fù)調(diào)了很久的細(xì)節(jié)是抖動(dòng)參數(shù)。抖動(dòng)太小線條太直太白抖動(dòng)太大線條顯得顫顫巍巍像是在劣質(zhì)數(shù)位板上畫的。最后鎖定在畫筆尺寸的15%到20%之間算是比較穩(wěn)妥的范圍。作者沒(méi)有寫具體的實(shí)現(xiàn)方案我先根據(jù)動(dòng)手經(jīng)驗(yàn)給出建議。實(shí)際也是反復(fù)調(diào)節(jié)后選擇的經(jīng)驗(yàn)值最終效果比較適中——筆觸順滑但有手感的“毛邊”。如果你照著做請(qǐng)一定拿真實(shí)筆觸做參考找到一個(gè)跟預(yù)期最接近的值固定下來(lái)。另一個(gè)心得是這個(gè)項(xiàng)目如果后續(xù)要繼續(xù)做最有價(jià)值的方向是把創(chuàng)作過(guò)程的數(shù)據(jù)保存下來(lái)而不只是保存最終圖像。創(chuàng)作過(guò)程比結(jié)果更有溫度。你看著一筆一筆被畫出來(lái)會(huì)理解藝術(shù)品的質(zhì)感是“生長(zhǎng)”出來(lái)的而不是“拼接”出來(lái)的。artcraft教會(huì)我的正是這一點(diǎn)——所謂craft藏在過(guò)程里不在結(jié)果里。