揭秘Canvas API：從簡單繪圖到進階特效無所不包

Canvas API是HTML5提供的一個強大的繪圖工具，可以實現從基礎繪圖到進階特效的各種功能。本文將帶您深入了解Canvas API的使用方法，並提供具體的程式碼範例。

1. 基礎繪圖
   Canvas API最基礎的就是繪製簡單的圖形，例如矩形、圓形、直線等。下面是一個建立矩形並填滿顏色的程式碼範例：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);

在上面的程式碼中，我們首先取得一個canvas元素，並透過getContext('2d' )方法取得2D繪圖上下文物件ctx。然後我們設定填滿顏色為紅色，使用fillRect方法繪製一個寬100px、高100px的紅色矩形。

2. 繪製文字
   Canvas API也可以用來繪製文字。以下是在Canvas上繪製文字的程式碼範例：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.fillStyle = 'blue';
ctx.fillText('Hello, Canvas!', 50, 50);

上面的程式碼中，我們先設定字型樣式和字型大小，然後設定填色為藍色，使用fillText方法在Canvas上寫入文字。

3. 圖片繪製
   除了基本的圖形和文字繪製，Canvas API還可以用來繪製圖片。下面是一個繪製圖片的程式碼範例：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'image.jpg';
img.onload = function() {
  ctx.drawImage(img, 0, 0);
};

上面的程式碼中，我們先建立一個Image對象，並設定其src屬性為圖片的URL。然後在onload事件中，使用drawImage方法繪製圖片到Canvas上。

4. 動畫效果
   Canvas API也可以用於創建各種動畫效果。下面是一個使用Canvas API建立一個簡單動畫效果的程式碼範例：

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

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'red';
  ctx.fillRect(x, 10, 100, 100);
  x += 1;
  if (x > canvas.width) {
    x = 0;
  }
  requestAnimationFrame(draw);
}

draw();

上面的程式碼中，我們使用requestAnimationFrame方法遞歸地呼叫draw函數，實作一個簡單的位移動畫效果。在每一幀的繪製中，我們首先使用clearRect方法清除Canvas上的內容，然後繪製一個寬100px、高100px的紅色矩形，並遞增x的值，實現矩形的水平位移。當x的值超過Canvas的寬度時，將x重設為0，達到循環播放的效果。

以上介紹了Canvas API的基礎繪圖、繪製文字、圖片繪製和動畫效果等功能，並提供了具體的程式碼範例。希望本文能幫助您更了解Canvas API的使用方法，發揮它強大的繪圖能力。

以上是揭秘Canvas API：從簡單繪圖到進階特效無所不包的詳細內容。更多資訊請關注PHP中文網其他相關文章！