Canvas2D介紹及使用指南

一、Canvas2D概述

Canvas2D是HTML5提供的一種畫布，通過JavaScript代碼將圖形和動畫繪製到畫布中。與SVG相比，Canvas2D更適合於處理遊戲、交互圖形等複雜的場景。Canvas2D支持基本的2D圖形繪製，包括直線、弧線、曲線、文本、圖像等。

Canvas2D的坐標系原點在左上角，x軸正方向向右，y軸正方向向下。Canvas2D中的對象包括畫布、繪製的圖形以及渲染上下文。通過獲取渲染上下文，我們可以使用Canvas2D進行圖形繪製和操作。

二、繪製圖形

1、繪製直線

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath(); // 開始繪製路徑
ctx.moveTo(50, 50); // 起點坐標
ctx.lineTo(100, 100); // 終點坐標
ctx.stroke(); // 繪製直線

2、繪製圓形

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath(); // 開始繪製路徑
ctx.arc(100, 100, 50, 0, 2*Math.PI); // 坐標、半徑、起始角度、終止角度
ctx.stroke(); // 繪製圓形

3、繪製曲線

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath(); // 開始繪製路徑
ctx.moveTo(50, 100); // 起點坐標
ctx.quadraticCurveTo(100, 50, 150, 100); // 控制點坐標、終點坐標
ctx.stroke(); // 繪製曲線

4、繪製文本

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.font = '24px Arial'; // 字體大小及類型
ctx.fillText('Hello, Canvas2D!', 50, 100); // 內容及位置

5、繪製圖像

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() { // 圖像載入完成後進行繪製
  ctx.drawImage(img, 50, 50); // 圖像對象及位置
}
img.src = 'example.jpg'; // 圖像地址

三、畫布操作

1、清空畫布

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空畫布

2、保存和恢復畫布狀態

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.save(); // 保存當前狀態
// 對畫布進行操作
ctx.restore(); // 恢復之前保存的狀態

四、動畫效果

1、使用setInterval實現動畫

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var x = 0;
setInterval(function() { // 定時執行函數
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, 100, 50, 0, 2*Math.PI);
  ctx.fill();
  x++;
}, 10); // 每10毫秒執行一次

2、使用requestAnimationFrame實現動畫

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var x = 0;
function animate() { // 動畫函數
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, 100, 50, 0, 2*Math.PI);
  ctx.fill();
  x++;
  requestAnimationFrame(animate); // 遞歸調用
}
animate(); // 啟動動畫

五、性能優化

1、使用離屏canvas

// 創建離屏canvas
var offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = 100;
offscreenCanvas.height = 100;
var offscreenCtx = offscreenCanvas.getContext('2d');
// 在離屏canvas上繪製圖形
offscreenCtx.beginPath();
offscreenCtx.arc(50, 50, 50, 0, 2*Math.PI);
offscreenCtx.fill();
// 將離屏canvas繪製到頁面上的canvas中
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(offscreenCanvas, 0, 0);

2、使用圖像緩存

// 創建圖像緩存
var imgCache = {};
function getImage(url) { // 獲取圖像方法
  if(imgCache[url]) { // 如果緩存中有圖像，則直接返回
    return imgCache[url];
  } else { // 否則新建Image對象載入圖像並存入緩存中
    var img = new Image();
    img.onload = function() {
      imgCache[url] = img;
    }
    img.src = url;
    return img;
  }
}
// 使用圖像緩存進行圖像繪製
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = getImage('example.jpg');
ctx.drawImage(img, 50, 50);

3、使用緩存區

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = canvas.width;
offscreenCanvas.height = canvas.height;
var offscreenCtx = offscreenCanvas.getContext('2d');
// 在緩存區繪製圖形
offscreenCtx.beginPath();
offscreenCtx.arc(50, 50, 50, 0, 2*Math.PI);
offscreenCtx.fill();
// 將緩存區繪製到頁面上的canvas中
ctx.drawImage(offscreenCanvas, 0, 0);

六、總結

本文對Canvas2D進行了詳細的介紹和使用指南，從圖形繪製、畫布操作、動畫效果以及性能優化等方面進行了詳細的講解，並給出了相應的代碼示例。Canvas2D的功能強大，可以用於實現各種2D圖形和動畫效果，希望讀者能夠通過本文對其有更深入的了解和應用。