HTML Canvas - 陰影和變換

Canvas API 還包含一些高階圖形樣式功能，可用於改善渲染到 Canvas 元素上的圖形的外觀。可以透過使用可用方法和屬性將陰影和變換應用於畫布上下文物件。

介面CanvasRenderringContext2D包含幾乎所有用於使用陰影和變換在 Canvas 元素內建立吸引人圖形的方法和屬性。

屬性

以下是 HTML5 中可用的與陰影和變換相關的各種屬性。

序號	屬性及描述
1	shadowBlur Canvas API 的此屬性將模糊陰影應用於在畫布元素內繪製的 Context 物件。
2	shadowColor shadowColor 屬性指定要應用於在 Canvas 元素內繪製的 Context 物件陰影的顏色。
3	shadowOffsetX 我們可以使用 shadowOffsetX 屬性設定要為上下文物件繪製的水平陰影距離。
4	shadowOffsetY 我們可以使用 shadowOffsetY 屬性設定要為上下文物件繪製的垂直陰影距離。

方法

在 Canvas 元素內部使用陰影和變換建立圖形可用的方法在下面的表格中給出。

序號	方法及描述
1	getTransform() CanvasRenderringContext2D 介面的此方法檢索應用於當前畫布元素上下文的變換。
2	resetTransform() 此方法透過將當前圖形轉換為 Canvas 元素內的原始形狀或路徑，將當前變換重置為單位矩陣。
3	restore() 呼叫此方法時，它會恢復最近儲存的畫布狀態。
4	rotate() Canvas API 的此方法向上下文物件的變換矩陣新增旋轉。
5	save() 呼叫此方法時，它會透過將其推入堆疊來儲存最近的畫布狀態。
6	scale() 呼叫此方法時，它會水平/垂直縮放當前上下文物件。
7	setTransform() Canvas 2D API 的此方法為給定的形狀呼叫變換矩陣，並幫助我們執行諸如旋轉、平移和縮放之類的移動操作。
8	transform() 此方法更改變換矩陣，使我們能夠縮放、旋轉和傾斜上下文物件。
9	translate() Canvas API 的此方法將平移變換新增到當前矩陣。

列印頁面

廣告

© . All rights reserved.