HTML 中的 Canvas 樣式設置全解

在 HTML5 中，<canvas> 元素提供了一個強大的繪圖接口，允許開發者通過 JavaScript 實現各種圖形和動畫效果。為了充分利用 <canvas> 的功能，理解其樣式設置是至關重要的。本文將詳細介紹如何在 HTML 中設置 <canvas> 的各種樣式屬性，幫助你實現更加豐富和靈活的繪圖效果。

1. 基礎設置

1.1 創建 Canvas

首先，在 HTML 文件中添加一個 <canvas> 元素：

<canvas id="myCanvas" width="500" height="500"></canvas>

注意：width 和 height 屬性定義了畫布的實際尺寸（以像素為單位），而 CSS 樣式中的寬度和高度僅影響畫布的顯示大小。

1.2 獲取 Canvas 上下文

在 JavaScript 文件中，使用 getContext('2d') 方法獲取 canvas 的上下文對象：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

2. 顏色與透明度

2.1 設置填充顏色

使用 fillStyle 屬性設置填充顏色：

ctx.fillStyle = 'red'; // 設置填充顏色為紅色

也可以使用 RGB 或 RGBA 格式：

ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 半透明紅色

2.2 設置描邊顏色

使用 strokeStyle 屬性設置描邊顏色：

ctx.strokeStyle = 'blue'; // 設置描邊顏色為藍色

同樣支持 RGB 和 RGBA 格式：

ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)'; // 半透明藍色

2.3 設置透明度

使用 globalAlpha 屬性設置整個畫布的透明度：

ctx.globalAlpha = 0.5; // 設置透明度為50%

3. 線條樣式

3.1 設置線條寬度

使用 lineWidth 屬性設置線條寬度：

ctx.lineWidth = 5; // 設置線條寬度為5px

3.2 設置線條端點樣式

使用 lineCap 屬性設置線條端點樣式，可選值有 'butt'、'round' 和 'square'：

ctx.lineCap = 'round'; // 設置線條端點為圓形

3.3 設置線條連接樣式

使用 lineJoin 屬性設置線條連接處的樣式，可選值有 'bevel'、'round' 和 'miter'：

ctx.lineJoin = 'round'; // 設置線條連接處為圓角

3.4 設置虛線樣式

使用 setLineDash 方法設置虛線樣式，參數為數組 [實線長度, 空白長度]：

ctx.setLineDash([10, 5]); // 設置虛線樣式為10px實線，5px空白

3.5 設置虛線偏移量

使用 lineDashOffset 屬性設置虛線偏移量：

ctx.setLineDash([10, 5]);
ctx.lineDashOffset = 5; // 設置虛線偏移量為5px

4. 文本樣式

4.1 設置字體

使用 font 屬性設置字體樣式，格式類似于 CSS 字體屬性：

ctx.font = 'italic bold 20px Arial'; // 設置字體樣式為斜體、加粗、20px的Arial字體

4.2 設置文本對齊方式

使用 textAlign 屬性設置文本對齊方式，可選值有 'left'、'center' 和 'right'：

ctx.textAlign = 'center'; // 設置文本對齊方式為居中

4.3 設置文本基線

使用 textBaseline 屬性設置文本基線，可選值有 'top'、'middle'、'bottom' 和 'alphabetic'：

ctx.textBaseline = 'middle'; // 設置文本基線為中間

5. 漸變與陰影

5.1 線性漸變

使用 createLinearGradient 方法創建線性漸變：

const gradient = ctx.createLinearGradient(0, 0, 200, 0); // 創建從左到右的線性漸變
gradient.addColorStop(0, 'red'); // 漸變起始顏色為紅色
gradient.addColorStop(1, 'blue'); // 漸變結束顏色為藍色
ctx.fillStyle = gradient; // 使用漸變作為填充顏色

5.2 徑向漸變

使用 createRadialGradient 方法創建徑向漸變：

const gradient = ctx.createRadialGradient(100, 100, 0, 100, 100, 100); // 創建徑向漸變
gradient.addColorStop(0, 'red'); // 漸變中心顏色為紅色
gradient.addColorStop(1, 'blue'); // 漸變邊緣顏色為藍色
ctx.fillStyle = gradient; // 使用漸變作為填充顏色

5.3 設置陰影

使用 shadowColor、shadowOffsetX、shadowOffsetY 和 shadowBlur 屬性設置陰影效果：

ctx.shadowOffsetX = 10; // 設置陰影水平偏移10px
ctx.shadowOffsetY = 10; // 設置陰影垂直偏移10px
ctx.shadowBlur = 5; // 設置陰影模糊半徑5px

6. 裁剪與變換

6.1 裁剪區域

使用 clip 方法裁剪當前路徑：

ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2, true); // 創建一個圓形路徑
ctx.clip(); // 將該圓形路徑作為裁剪區域
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, 200, 150); // 只有圓形區域內的部分會被填充

6.2 平移變換

使用 translate 方法平移坐標系：

ctx.translate(50, 50); // 將坐標系原點平移到(50, 50)

6.3 縮放變換

使用 scale 方法縮放坐標系：

ctx.scale(2, 2); // 將坐標系縮放2倍

6.4 旋轉變換

使用 rotate 方法旋轉坐標系：

ctx.rotate(Math.PI / 4); // 將坐標系旋轉45度（π/4弧度）

6.5 復合變換

可以組合使用 save 和 restore 方法保存和恢復變換狀態：

ctx.save(); // 保存當前變換狀態
ctx.translate(50, 50);
ctx.scale(2, 2);
ctx.restore(); // 恢復之前的變換狀態

7. 圖像處理

7.1 繪制圖像

使用 drawImage 方法繪制圖像：

const img = new Image();
img.src = 'your-image-url.jpg';
img.onload = () => {ctx.drawImage(img, 0, 0, 200, 150); // 在(0, 0)位置繪制寬200px高150px的圖像
};

7.2 圖像裁剪

可以通過指定裁剪區域來裁剪圖像：

ctx.drawImage(img, 0, 0, 100, 100, 0, 0, 200, 200); // 裁剪圖像并放大顯示

7.3 圖像濾鏡

雖然 <canvas> 不直接支持 CSS 濾鏡，但可以通過 getImageData 和 putImageData 方法進行像素級操作來實現類似效果。例如，簡單的灰度轉換：

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;for (let i = 0; i < data.length; i += 4) {const r = data[i];const g = data[i + 1];const b = data[i + 2];// 計算灰度值const gray = 0.299 * r + 0.587 * g + 0.114 * b;// 設置灰度值data[i] = gray;     // Reddata[i + 1] = gray; // Greendata[i + 2] = gray; // Blue
}ctx.putImageData(imageData, 0, 0);

8. 其他功能

8.1 測量文本寬度

使用 measureText 方法測量文本寬度：

const metrics = ctx.measureText('Hello World');
console.log(metrics.width); // 輸出文本的寬度

8.2 清除畫布

使用 clearRect 方法清除畫布：

ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除整個畫布

8.3 更新畫布

在 HTML 中，通常不需要顯式調用更新方法，因為所有的繪圖操作都會立即生效。但在某些框架或庫中，可能需要手動刷新畫布。

示例代碼

以下是一個完整的示例代碼，展示了如何使用上述的各種樣式設置來繪制復雜的圖形：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Canvas Styles</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f0f0f0;}canvas {border: 1px solid black;}</style>
</head>
<body><canvas id="myCanvas" width="500" height="500"></canvas><script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');// 設置背景顏色ctx.fillStyle = '#f0f0f0';ctx.fillRect(0, 0, canvas.width, canvas.height);// 繪制一個矩形ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';ctx.fillRect(50, 50, 200, 100);// 繪制一條帶虛線的路徑ctx.beginPath();ctx.moveTo(50, 200);ctx.lineTo(250, 200);ctx.setLineDash([10, 5]);ctx.stroke();// 設置文字樣式并繪制文本ctx.font = 'italic bold 24px Arial';ctx.textAlign = 'center';ctx.textBaseline = 'middle';ctx.fillStyle = 'blue';ctx.fillText('Hello Canvas', 250, 300);// 創建并應用線性漸變const gradient = ctx.createLinearGradient(0, 0, 200, 0);gradient.addColorStop(0, 'red');gradient.addColorStop(1, 'blue');ctx.fillStyle = gradient;ctx.fillRect(50, 350, 200, 50);// 應用陰影ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';ctx.shadowOffsetX = 10;ctx.shadowOffsetY = 10;ctx.shadowBlur = 5;ctx.fillStyle = 'green';ctx.fillRect(300, 50, 150, 100);// 平移、縮放和旋轉變換ctx.save();ctx.translate(300, 300);ctx.scale(2, 2);ctx.rotate(Math.PI / 4);ctx.fillStyle = 'purple';ctx.fillRect(-25,

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/70599.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/70599.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/70599.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！