CSS繪畫(huà)API使用JavaScript在CSS中啟用動(dòng)態(tài)圖像生成。 1。開(kāi)發(fā)人員使用Paint（）方法創(chuàng)建一個(gè)油漆工作點(diǎn)類(lèi)。 2。他們通過(guò)registerPaint（）登記。 3。然後在CSS屬性（例如背景圖像）中使用自定義塗料功能。這允許動(dòng)態(tài)視覺(jué)效果，渲染管道內(nèi)的性能優(yōu)勢(shì)以及CSS的可重複使用邏輯。但是，瀏覽器支持僅限於基於鉻的瀏覽器，而效率低下的代碼可能會(huì)導(dǎo)致性能問(wèn)題。它是主題系統(tǒng)，交互式UI或佈局依賴(lài)性視覺(jué)效果的理想選擇，而無(wú)需額外的標(biāo)記。

CSS繪畫(huà)API是較大的CSS Houdini Suite的一部分，這是一組低級(jí)API，可讓開(kāi)發(fā)人員更直接訪問(wèn)瀏覽器的樣式和佈局過(guò)程。具體而言，CSS繪畫(huà)API使您可以編寫(xiě)JavaScript函數(shù)，該功能動(dòng)態(tài)生成圖像，以用於CSS屬性，例如background-image ， list-style-image ，甚至border-image 。這為自定義視覺(jué)效果開(kāi)闢了新的可能性，僅使用標(biāo)準(zhǔn)CSS就很難（或不可能）實(shí)現(xiàn)。

CSS繪畫(huà)API如何工作？

CSS繪畫(huà)API的核心使您可以使用JavaScript定義自定義的油漆功能，註冊(cè)它，然後像任何內(nèi)置圖像功能一樣在CSS中引用它。

這是逐步工作的方式：

• 創(chuàng)建一個(gè)油漆工作點(diǎn)：您編寫(xiě)一個(gè)延長(zhǎng)PaintWorklet並實(shí)現(xiàn)paint()方法的類(lèi)。
• 註冊(cè)：使用registerPaint()使您的自定義繪畫(huà)邏輯可用。
• 將其加載到CSS中：使用CSS屬性中的paint()函數(shù)將其添加到樣式中。

例如：

 // my-paint.js
類(lèi)mycustompaint {
  油漆（CTX，GEOM，屬性）{
    ctx.fillstyle ='red';
    ctx.fillect（0，0，geom.width，geom.height）;
  }
}
registerPaint（“ mycustompaint”，mycustompaint）;

然後在CSS中：

 .my-element {
  背景圖像：油漆（mycustompaint）;
}

這使您可以完全控制使用代碼在視覺(jué)上呈現(xiàn)元素的方式。

為什麼要使用CSS繪畫(huà)API？

有幾個(gè)可靠的理由來(lái)達(dá)到此API：

• 動(dòng)態(tài)視覺(jué)效果：創(chuàng)建對(duì)元素大小，主題更改或其他計(jì)算值響應(yīng)的視覺(jué)效果，而無(wú)需額外的DOM元素或畫(huà)布標(biāo)籤。
• 性能好處：由於這些油漆在渲染管道內(nèi)部運(yùn)行，因此可以比手動(dòng)更新畫(huà)布或SVG更好地優(yōu)化它們。
• 可重用性：一旦註冊(cè)，您的油漆工作點(diǎn)就可以在CSS中的任何地方使用，就像本機(jī)功能一樣。

您可以使用它來(lái)構(gòu)建基於組件狀態(tài)的動(dòng)畫(huà)梯度，響應(yīng)式模式甚至實(shí)時(shí)UI指標(biāo)之類(lèi)的東西 - 全部來(lái)自CSS。

你應(yīng)該注意什麼？

雖然強(qiáng)大，但CSS繪畫(huà)API並不是您應(yīng)該輕輕地拿到的：

• 瀏覽器支持：它在基於鉻的瀏覽器（例如鉻和邊緣）中得到了支持，但尚未在Safari或Firefox中進(jìn)行支持。始終檢查兼容性，如果您正在建造廣泛的受眾。
• 性能陷阱：由於塗料功能每次瀏覽器重新粉刷時(shí)都會(huì)運(yùn)行，因此這裡效率低下的代碼可能會(huì)導(dǎo)致性能問(wèn)題。
• 無(wú)DOM訪問(wèn)：油漆工作點(diǎn)在受限環(huán)境中運(yùn)行。您無(wú)法操縱DOM或進(jìn)行異??步操作。

另外，請(qǐng)記住，複雜的視覺(jué)邏輯可能更難進(jìn)行調(diào)試，因?yàn)樗钤贘avaScript中，但會(huì)影響CSS行為。

什麼時(shí)候值得使用？

當(dāng)您需要時(shí)，這是有道理的：

• 依賴(lài)佈局大小或主題變量的自定義背景或邊界
• 視覺(jué)效果，否則需要額外的標(biāo)記或重型資產(chǎn)
• 交互式設(shè)計(jì)系統(tǒng)，外觀需要編程適應(yīng)

如果您正在使用設(shè)計(jì)系統(tǒng)，主題引擎或高度交互式UI庫(kù)，那麼CSS繪畫(huà)API可能是在您的套件中擁有的絕佳工具。

這就是CSS繪畫(huà)API所做的基礎(chǔ)知識(shí)以及它為什麼重要的基礎(chǔ)知識(shí)。這不是您每天都使用的東西，但是當(dāng)您需要時(shí)，它可以打開(kāi)一些很酷的選擇。

以上是CSS繪畫(huà)API是什麼？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！