HTML5 Canvas – 樣式和顏色
HTML5 Canvas 是從 Web 開發中引入的一個實用工具。愛掏網 - it200.com它可以用于創建包括動畫、游戲、繪圖和其他多媒體元素等在內的各種視覺元素。愛掏網 - it200.com本文主要介紹如何利用 Canvas 來設置樣式與顏色。愛掏網 - it200.com
在 Canvas 中，像素被繪制在 x 和 y 坐標軸中間的交叉點上。愛掏網 - it200.com原點 (0,0) 在 Canvas 左上角（默認情況下）。愛掏網 - it200.com向右和向下分別是正方向。愛掏網 - it200.com
設置樣式
在 Canvas 中，可以根據需求設置各種樣式屬性。愛掏網 - it200.com例如，在繪制形狀時，可以設置線條的寬度和顏色，或者用漸變或圖案來填充形狀。愛掏網 - it200.com下面，我們來一一介紹這些樣式屬性。愛掏網 - it200.com
線條樣式
lineWidth
lineWidth 屬性用于設置線條的寬度。愛掏網 - it200.com
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.lineWidth = 10;
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.stroke();
lineCap
lineCap 屬性用于設置線條的端點形狀。愛掏網 - it200.com它有三個可用的值：butt（默認值）、round 和 square。愛掏網 - it200.com
ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineCap = 'round';
ctx.moveTo(150, 50);
ctx.lineTo(200, 100);
ctx.stroke();
lineJoin
lineJoin 屬性用于設置線條的連接樣式。愛掏網 - it200.com它有三個可用的值：miter（默認值）、bevel 和 round。愛掏網 - it200.com
ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineJoin = 'bevel';
ctx.moveTo(250, 50);
ctx.lineTo(300, 75);
ctx.lineTo(250, 100);
ctx.stroke();
漸變填充樣式
Canvas 支持兩種漸變，線性漸變和徑向漸變。愛掏網 - it200.com
線性漸變
createLinearGradient 方法用于創建線性漸變對象。愛掏網 - it200.com它有四個參數：起始點的坐標 (x1, y1) 和終點的坐標 (x2, y2)。愛掏網 - it200.com
ctx.beginPath();
const gradient = ctx.createLinearGradient(50, 150, 150, 150);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'green');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(50, 150, 100, 50);
徑向漸變
createRadialGradient 方法用于創建徑向漸變對象。愛掏網 - it200.com它有六個參數：兩個圓的中心 (x1, y1) 和 (x2, y2)，以及兩個圓的半徑 r1 和 r2。愛掏網 - it200.com
ctx.beginPath();
const gradient = ctx.createRadialGradient(250, 150, 50, 250, 150, 100);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'green');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(200, 100, 100, 100);
圖案填充樣式
pattern 屬性用于填充圖案。愛掏網 - it200.com
createPattern
createPattern 方法用于創建 pattern 對象。愛掏網 - it200.com
const img = new Image();
img.src = 'https://deepinout.com/html/html5-tutorials/pattern.png';
img.onload = function() {
const pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(350, 100, 100, 100);
}
設置顏色
在 Canvas 中，顏色是固定的。愛掏網 - it200.com可以使用多種方式來指定顏色。愛掏網 - it200.com
RGB 和 RGBA 顏色
RGB 顏色
在 Canvas 中，RGB 顏色用于指定一種由紅、綠、藍三原色混合而來的顏色。愛掏網 - it200.com每種顏色的取值范圍是0-255。愛掏網 - it200.com
ctx.fillStyle = 'rgb(255, 0, 0)';
ctx.fillRect(50, 250, 50, 50);
ctx.fillStyle = 'rgb(0, 255, 0)';
ctx.fillRect(100, 250, 50, 50);
ctx.fillStyle = 'rgb(0, 0, 255)';
ctx.fillRect(150, 250, 50, 50);
RGBA 顏色
在 Canvas 中，RGBA 顏色用于指定一種由紅、綠、藍三原色和 alpha 通道混合而來的顏色。愛掏網 - it200.com每種顏色的取值范圍是0-255，alpha 通道的取值范圍是0-1，它表示顏色的透明度。愛掏網 - it200.com
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fillRect(200, 250, 50, 50);
ctx.fillStyle = 'rgba(0, 255, 0, 0.75)';
ctx.fillRect(250, 250, 50, 50);
ctx.fillStyle = 'rgba(0, 0, 255, 0.25)';
ctx.fillRect(300, 250, 50, 50);
十六進制顏色
在 Canvas 中，也可以使用十六進制顏色來指定顏色。愛掏網 - it200.com
ctx.fillStyle = '#ff0000';
ctx.fillRect(50, 350, 50, 50);
ctx.fillStyle = '#00ff00';
ctx.fillRect(100, 350, 50, 50);
ctx.fillStyle = '#0000ff';
ctx.fillRect(150, 350, 50, 50);
結論
通過本文的介紹，我們了解到了 Canvas 中如何設置樣式和顏色。愛掏網 - it200.com我們可以通過設置線條樣式、漸變填充樣式、圖案填充樣式和顏色等方式，使 Canvas 更加美觀和實用。愛掏網 - it200.com在實際項目中，合理設置 Canvas 的樣式和顏色，能夠增強用戶的交互體驗，使界面更加美觀。愛掏網 - it200.com