HTML Canvas - 顏色和樣式

我們還可以使用 Canvas 的 API 方法和屬性為 Canvas 上繪製的圖形設定樣式，從而生成和使用具有吸引力的視覺內容。Canvas 提供了各種選項來設定在 Canvas 元素上呈現的圖形的樣式。

介面CanvasRenderringContext2D包含了大多數在 Canvas 元素上建立吸引人圖形的方法和屬性。當需要時，上下文物件還會使用包含圖形樣式方法和屬性的其他介面。

以下是可用於將不同的顏色和樣式應用於 HTML5 元素的屬性列表。

序號	屬性及描述
1	filter 此屬性提供濾鏡效果，例如灰度、不透明度和模糊。它接受 CSS filter 樣式接受的所有值。
2	globalAlpha 此屬性指定要應用於上下文物件的當前圖形的不透明度。
3	globalCompositeOperation 此屬性將合成操作應用於 Canvas 元素物件。

序號

屬性及描述

此屬性提供濾鏡效果，例如灰度、不透明度和模糊。它接受 CSS filter 樣式接受的所有值。

此屬性指定要應用於上下文物件的當前圖形的不透明度。

此屬性將合成操作應用於 Canvas 元素物件。

下表列出了可在 Canvas 元素內部建立圖形以及對其著色和設定樣式的方法。

序號	方法及描述
1	addcolorStop() 此方法在 Canvas 元素內的 Canvas 漸變中新增一個新的顏色停止點。
2	createConicGradient() Canvas API 的createConicGradient()方法在給定座標的點周圍建立一個漸變。
3	createLinearGradient() Canvas API 的createLinearGradient()方法沿連線給定座標的線建立漸變。
4	createPattern() 此方法透過在給定區域中重複輸入影像來建立圖案。
5	createRadialGradient() Canvas API 的createRadialGradient()方法使用兩個圓的大小和給定座標建立徑向漸變。

列印頁面