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

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

CSS繪畫API如何工作？

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

這是逐步工作的方式：

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

例如：

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

然后在CSS中：

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

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

為什么要使用CSS繪畫API？

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

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

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

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

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

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

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

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

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

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

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

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

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