來源:https://medium.com/better-programming,作者:Ferenc Almasi
現代Web應用對圖像的需求量很大,它們佔據網絡下載的大部分字節。通過優化它們,你可以更好地利用它們的性能。如果你碰巧使用幾何圖形作爲背景圖像,有一個替代方案:你可以使用 CSS Paint API [1] 以編程方式生成背景。
在本教程中,我們將探討其功能,並探討如何使用它來動態創建與分辨率無關的動態背景。這將是本教程的輸出:
參考閱讀:CSS屆的繪圖板CSS Paint API簡介,張鑫旭, https://www.zhangxinxu.com/wordpress/2018/11/css-paint-api-canvas/
目錄:
-
設置項目
-
什麼是worklet?
-
定義Worklet
-
繪製矩形
-
使背景動態化
-
在CSS中檢查支持
-
訪問繪畫worklet中的參數
-
總結
設置項目
首先,創建一個新的 index.html
文件,並編寫如下代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>:art: CSS Paint API</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <textarea class="pattern"></textarea> <script> if ('paintWorklet' in CSS) { CSS.paintWorklet.addModule('pattern.js'); } </script> </body> </html>
有幾件事要注意:
-
在第13行,我們加載了一個新的Paint worklet。目前,全球支持率約爲63%。因此,我們必須首先檢查是否支持
paintWorklet
。 -
我正在使用
textarea
進行演示,因此我們可以看到調整畫布的大小將如何重繪圖案。 -
最後,你需要創建一個
pattern.js
(用於註冊繪畫工作區)以及一個styles.css
,我們可以在其中定義幾個樣式。
什麼是worklet?
Paint worklet是一個定義了應該畫在畫布上的內容的類。它們的工作原理與 canvas
元素類似。如果你以前有這方面的知識,代碼會看起來很熟悉。然而,它們並不是100%相同的。例如,在worklet中還不支持文本渲染方法。
在這裏,我們還要定義CSS樣式。這是我們要使用worklet的地方:
.pattern { width: 250px; height: 250px; border: 1px solid #000; background-image: paint(pattern); }
我添加了一個黑色的邊框,這樣我們可以更好地看到 textarea
。要引用一個paint worklet,你需要把 paint(worklet-name)
作爲一個值傳遞給 background-image
屬性。但是 pattern
是從哪裏來的呢?我們還沒有定義它,所以讓我們把它作爲我們的下一步。
定義Worklet
打開 pattern.js
並添加以下內容:
class Pattern { paint(context, canvas, properties) { } } registerPaint('pattern', Pattern);
在這裏可以使用 registerPaint
方法註冊 paintWorklet
。你可以在此處定義的CSS中引用第一個參數。第二個參數是定義應在canvas上繪畫的類。它具有一個包含三個參數的 paint
方法:
-
context PaintRenderingContext2D CanvasRenderingContext2D API
-
canvas
:這是我們的canvas,一個PaintSize
對象,只有兩個屬性:width和height。 -
properties
:這將返回一個StylePropertyMapReadOnly
對象,我們可以使用該對象通過JavaScript讀取CSS屬性及其值。
繪製矩形
下一步是顯示一些東西,所以讓我們繪製矩形。將以下內容添加到 paint
方法中:
paint(context, canvas, properties) { for (let x = 0; x < canvas.height / 20; x++) { for (let y = 0; y < canvas.width / 20; y++) { const bgColor = (x + y) % 2 === 0 ? '#FFF' : '#FFCC00'; context.shadowColor = '#212121'; context.shadowBlur = 10; context.shadowOffsetX = 10; context.shadowOffsetY = 1; context.beginPath(); context.fillStyle = bgColor; context.rect(x * 20, y * 20, 20, 20); context.fill(); } } }
我們在這裏所做的就是創建一個嵌套循環,以循環遍歷畫布的寬度和高度。由於矩形的大小爲20,因此我們要將矩形的高度和寬度除以20。
在第4行,我們可以使用模數運算符在兩種顏色之間切換。我還爲深度添加了一些陰影。最後,我們在畫布上繪製矩形。如果在瀏覽器中打開它,則應具有以下內容:
使背景動態化
遺憾的是,除了調整 textarea
的大小和一窺Paint API是如何重繪一切的,這大部分還是靜態的。所以,讓我們通過添加我們可以改變的自定義CSS屬性來讓事情變得更加動態。
打開你的 styles.css
並在其中添加以下幾行:
.pattern { width: 250px; height: 250px; border: 1px solid #000; background-image: paint(pattern); + --pattern-color: #FFCC00; + --pattern-size: 23; + --pattern-spacing: 0; + --pattern-shadow-blur: 10; + --pattern-shadow-x: 10; + --pattern-shadow-y: 1; }
你可以通過在CSS屬性前加上 —
來定義自定義CSS屬性。這些屬性可以被 var()
函數使用。但在我們的案例中,我們將在我們的paint worklet中使用它。
在CSS中檢查支持
爲確保支持Paint API,我們還可以檢查CSS中的支持。爲此,我們有兩個選擇:
-
使用
@supports
規則守護規則。 -
使用後備背景圖片。
/* 第一種選擇 */ @supports (background: paint(pattern)) { /** * 如果該部分得到評估,則意味着Paint API 支持 **/ } /** * 第二種選擇 * 如果支持Paint API,後一條規則將覆蓋第一條規則。 * 如果不支持,CSS將使其無效,並將應用url()的規則。 **/ .pattern { background-image: url(pattern.png); background-image: paint(pattern); }
訪問繪畫worklet中的參數
要讀取 pattern.js
中的這些參數,您需要向定義paint worklet的類中添加一個新方法:
class Pattern { // `inputProperties`方法返回的任何東西,paint worklet都可以訪問。 static get inputProperties() { return [ '--pattern-color', '--pattern-size', '--pattern-spacing', '--pattern-shadow-blur', '--pattern-shadow-x', '--pattern-shadow-y' ]; } }
要在 paint
方法內部訪問這些屬性,可以使用 properties.get
:
paint(context, canvas, properties) { const props = { color: properties.get('--pattern-color').toString().trim(), size: parseInt(properties.get('--pattern-size').toString()), spacing: parseInt(properties.get('--pattern-spacing').toString()), shadow: { blur: parseInt(properties.get('--pattern-shadow-blur').toString()), x: parseInt(properties.get('--pattern-shadow-x').toString()), y: parseInt(properties.get('--pattern-shadow-y').toString()) } }; }
對於顏色,我們需要將其轉換爲字符串。其他所有內容都需要轉換爲數字。這是因爲 properties.get
返回 CSSUnparsedValue
。
爲了使內容更具可讀性,我創建了兩個新函數來爲我們處理解析:
paint(context, canvas, properties) { const getPropertyAsString = property => properties.get(property).toString().trim(); const getPropertyAsNumber = property => parseInt(properties.get(property).toString()); const props = { color: getPropertyAsString('--pattern-color'), size: getPropertyAsNumber('--pattern-size'), spacing: getPropertyAsNumber('--pattern-spacing'), shadow: { blur: getPropertyAsNumber('--pattern-shadow-blur'), x: getPropertyAsNumber('--pattern-shadow-x'), y: getPropertyAsNumber('--pattern-shadow-y') } }; }
現在我們要做的就是用相應的 prop
值替換for循環中的所有內容:
for (let x = 0; x < canvas.height / props.size; x++) { for (let y = 0; y < canvas.width / props.size; y++) { const bgColor = (x + y) % 2 === 0 ? '#FFF' : props.color; context.shadowColor = '#212121'; context.shadowBlur = props.shadow.blur; context.shadowOffsetX = props.shadow.x; context.shadowOffsetY = props.shadow.y; context.beginPath(); context.fillStyle = bgColor; context.rect(x * (props.size + props.spacing), y * (props.size + props.spacing), props.size, props.size); context.fill(); } }
現在回到你的瀏覽器,試着改變一下。
總結
爲什麼CSS Paint API對我們有用?有哪些用例?
最明顯的是,它減小了響應的大小。通過消除圖像的使用,你可以節省一個網絡請求和幾千字節。這樣可以提高性能。
對於使用DOM元素的複雜CSS效果,你還可以減少頁面上的節點數量。因爲你可以用Paint API創建複雜的動畫,所以不需要額外的空節點。
在我看來,最大的好處是它的可定製性遠高於靜態背景圖片。API還可以創建與分辨率無關的圖像,所以你不用擔心錯過單一屏幕尺寸。
如果你今天選擇使用CSS Paint API,請確保你提供polyfill,因爲它仍然沒有被廣泛採用。如果你想調整完成的項目,你可以從這個 GitHub倉庫 [2] 中克隆它。
綠皮書正式版 :經過前兩個版本的積累和歷經三年的全面重寫,這本書終於達成技術剖析和用戶體驗的完美契合。
廣深鑄就宏篇 :論深,本書深究JS之所以然,舉世無可出其右;論廣,本書遍歷語義之細部,看罷再無機理之惑。
超語言之思想 :萬法歸宗異曲同工,剝去JS外殼,本書居高處辨析語言奧義的技術大局觀,適用於所有編程語言。
修煉重在重學 :混合App|Node服務端|FaaS雲原生|前端智能化時代,迴歸本質重修這門基礎課才能走得更遠更快。
參考資料
CSS Paint API: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API
GitHub倉庫: https://github.com/flowforfrank/css-paint
近期文章
DOM API中append和appendChild的三個不同點
你知道Object.entries(),但你還知道有Object.fromEntries()嗎?
僅3行核心CSS代碼的rate評分組件
使用JavaScript的padStart和padEnd格式化字符串
Vue 3教程(適用於Vue 2用戶)
JavaScript vs Dart 兩者之間的比較
不要過度使用React.useCallback()
HTML頁面生成器:使用JavaScript和Node創建CLI
React.js和Vue.js的語法並列比較
從零開始使用JavaScript製作自己的命令行(CLI工具)
Vue.js中編寫更好的v-for循環的6種技巧
如果對你有幫助,還可以 在看、留言、 轉發 ,這是對作者最大的幫助。