PaintRenderingContext2D

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

PaintRenderingContext2D 介面是 CSS Painting API 的一部分，是該 API 用於在點陣圖上進行繪製的渲染上下文。它實現了 CanvasRenderingContext2D API 的一個子集，但存在以下例外：

它不實現 CanvasImageData 畫素操作、CanvasUserInterface 焦點、CanvasText 文字繪製或 CanvasTextDrawingStyles 文字樣式介面方法。
輸出點陣圖的大小與正在為其進行渲染的物件的大小相同。
當 currentColor 用作顏色時，它將被視為不透明的黑色。

此介面僅在 PaintWorkletGlobalScope 中可用。

例項屬性和方法

PaintRenderingContext2D 實現 CanvasRenderingContext2D API 的一個子集，所有屬性和方法的使用方式與 CanvasRenderingContext2D 中的用法相同。

CanvasRenderingContext2D.save(): 使用堆疊儲存當前繪圖樣式狀態，以便你可以使用 restore() 恢復對其所做的任何更改。
CanvasRenderingContext2D.restore(): 將繪圖樣式狀態恢復到由 save() 儲存的“狀態堆疊”上的最後一個元素。
CanvasRenderingContext2D.reset(): 將當前繪製樣式狀態重置為預設值。

CanvasRenderingContext2D.getTransform(): 檢索當前應用於上下文的變換矩陣，並將其作為 DOMMatrix 返回。
CanvasRenderingContext2D.rotate(): 向變換矩陣新增旋轉。角度引數表示順時針旋轉角度，以弧度表示。
CanvasRenderingContext2D.scale(): 透過 x 水平方向和 y 垂直方向對 canvas 單位新增縮放變換。
CanvasRenderingContext2D.translate(): 透過將 canvas 及其原點在網格上水平移動 x 和垂直移動 y 來新增平移變換。
CanvasRenderingContext2D.transform(): 將當前變換矩陣與其引數描述的矩陣相乘。
CanvasRenderingContext2D.setTransform(): 將當前變換重置為單位矩陣，然後使用相同的引數呼叫 transform() 方法。
CanvasRenderingContext2D.resetTransform(): 透過單位矩陣重置當前變換。

CanvasRenderingContext2D.globalAlpha: 在組合到畫布之前應用於形狀和影像的透明度值。
CanvasRenderingContext2D.globalCompositeOperation: 在應用 globalAlpha 的情況下，此設定決定了形狀和影像如何繪製到現有點陣圖上。

CanvasRenderingContext2D.imageSmoothingEnabled: 影像平滑模式；如果停用，影像在縮放時將不會進行平滑處理。
CanvasRenderingContext2D.imageSmoothingQuality: 允許你設定影像平滑的質量。

CanvasRenderingContext2D.createConicGradient(): 圍繞由引數表示的座標點建立一個錐形漸變。
CanvasRenderingContext2D.createLinearGradient(): 沿由引數表示的座標線建立一個線性漸變。
CanvasRenderingContext2D.createRadialGradient(): 根據引數表示的兩個圓的座標建立一個徑向漸變。
CanvasRenderingContext2D.createPattern(): 使用指定影像建立 CanvasPattern 圖案，該圖案根據 repetition 引數指定的方向重複。

CanvasRenderingContext2D.beginPath(): 開始一個新的路徑，清空子路徑列表。當您想要建立一個新路徑時，呼叫此方法。
CanvasRenderingContext2D.fill(): 使用當前的填充樣式填充當前路徑的子路徑。
CanvasRenderingContext2D.stroke(): 使用當前的描邊樣式描繪當前路徑的子路徑。
CanvasRenderingContext2D.clip(): 將當前或指定的路徑轉換為當前的剪裁區域，並使用指定的填充規則來確定哪些點在路徑內。後續的路徑修改將僅顯示在剪裁路徑內。
CanvasRenderingContext2D.isPointInPath(): 一個布林值，如果指定點包含在當前或指定的路徑中，則其值為 true。
CanvasRenderingContext2D.isPointInStroke(): 一個布林值，如果該點在描繪路徑所包含的區域內，則其值為 true。

CanvasRenderingContext2D.lineWidth: 一個數字，指定線寬，以座標空間單位表示。
CanvasRenderingContext2D.lineCap: 線條末端的樣式。可能的值：butt（預設）、round、square。
CanvasRenderingContext2D.lineJoin: 定義兩條線相交處的角點型別。可能的值：round、bevel、miter（預設）。
CanvasRenderingContext2D.miterLimit: 一個數字，指定斜接限制比率，以座標空間單位表示。
CanvasRenderingContext2D.getLineDash(): 以數字 Array 的形式返回當前線段圖案，該陣列指定座標空間單位的線段和間隙的長度。
CanvasRenderingContext2D.setLineDash(): 將線段和間隙距離列表設定為當前線段圖案（在描邊時使用）。
CanvasRenderingContext2D.lineDashOffset: 指定虛線陣列在一條線上開始的位置。

CanvasRenderingContext2D.closePath(): 將當前子路徑標記為閉合，從當前點到起點繪製一條直線，並以新閉合子路徑的起點和終點相同的點開始一個新子路徑。如果形狀已關閉或只有一個點，此函式將不起作用。
CanvasRenderingContext2D.moveTo(): 將新子路徑的起始點移動到 (x, y) 座標。
CanvasRenderingContext2D.lineTo(): 用一條直線將當前子路徑中的最後一個點連線到指定的 (x, y) 座標。
CanvasRenderingContext2D.bezierCurveTo(): 向當前路徑新增一條三次貝塞爾曲線。
CanvasRenderingContext2D.quadraticCurveTo(): 向當前路徑新增一條二次貝塞爾曲線。
CanvasRenderingContext2D.arc(): 向當前路徑新增一個圓弧。
CanvasRenderingContext2D.arcTo(): 根據給定的控制點和半徑向當前路徑新增一個圓弧，並用一條直線連線到前一個點。
CanvasRenderingContext2D.ellipse(): 向當前路徑新增一個橢圓弧。
CanvasRenderingContext2D.rect(): 在 (x, y) 位置建立一個矩形路徑，其大小由 width 和 height 確定。
CanvasRenderingContext2D.roundRect(): 建立一個帶有圓角的矩形路徑，該矩形位於 (x, y) 位置，尺寸由 width 和 height 確定，圓角半徑由 radii 確定。

請參閱 CSS Painting API 的完整示例。

規範
CSS Painting API Level 1 # 2d-rendering-context

此頁面最後修改於 2025年2月6日，由 MDN 貢獻者修改。