筆者大量使用three.js在作動畫，所產生的canvas大部分都應用在網頁遊戲，現在需要將這些動畫應用在網站中，馬上面臨到用戶裝置顯示大小不同的問題，而且還要整合在HTML中，今天就來筆記一下解決的方案。

HTML5 畫布元素的響應式研究。

Canvas（畫布）在中文正式領域中通常被稱為「畫布元素」或「Canvas 元素」。在 HTML5 的技術文件中，其正式的中文名稱是「畫布元素」（Canvas Element）。

若要更專業的說明，在 HTML5 規範中，它是一個用於即時產生圖像、繪製圖形、製作動畫和遊戲圖形的 HTML 元素。完整的專業中文表述通常是「HTML5 畫布元素」（HTML5 Canvas Element）。

在技術文件或教學資源中，有時也會看到以下幾種稱呼：

• Canvas 畫布
• HTML5 Canvas 繪圖元素
• 網頁畫布元素

但最正式且最常用的中文名稱就是「畫布元素」。

畫布元素本身需要明確設定寬度和高度，但我們有幾種方式來實現響應式設計：

1. 使用 JavaScript 動態調整：

javascript
// 監聽視窗調整事件
window.addEventListener('resize', resizeCanvas);

function resizeCanvas() {
    const canvas = document.querySelector('canvas');
    // 取得父元素寬度
 canvas.width = canvas.parentElement.clientWidth;
    // 可以設定特定比例
 canvas.height = canvas.width * 0.5; // 例如 2:1 的比例
}

2. 使用 CSS 設定寬度百分比配合 JavaScript：

css
canvas {
    width: 100%;
    height: auto;
}

javascript
// 但仍需要設定實際的 canvas 像素
const canvas = document.querySelector('canvas');
// 取得 CSS 計算後的實際寬度
const displayWidth = canvas.clientWidth;
// 設定實際畫布大小
canvas.width = displayWidth;
canvas.height = displayWidth * 0.5;

3. 使用 CSS transform scale 縮放：

css
canvas {
    transform: scale(0.5);
    transform-origin: 0 0;
}

4. 考慮設備像素比（Device Pixel Ratio）：

javascript
function setupCanvas() {
    const canvas = document.querySelector('canvas');
    const dpr = window.devicePixelRatio || 1;
    const rect = canvas.getBoundingClientRect();
     // 設定實際像素大小
 canvas.width = rect.width * dpr;
 canvas.height = rect.height * dpr;
     // 設定 CSS 大小
 canvas.style.width = `${rect.width}px`;
 canvas.style.height = `${rect.height}px`;
     // 調整繪圖環境比例
    const ctx = canvas.getContext('2d');
 ctx.scale(dpr, dpr);
}

需要注意的幾個重點：

1. 效能考量：
   • 頻繁調整 canvas 大小會導致內容重繪
   • 可以使用 debounce 或 throttle 來控制 resize 事件的觸發頻率
2. 清晰度問題：
   • 需要考慮高解析度（Retina）顯示器
   • 使用 devicePixelRatio 來確保在高 DPI 螢幕上的顯示品質
3. 內容縮放：
   • 當 canvas 大小改變時，需要重新計算內部元素的位置和大小
   • 可能需要維護一個相對座標系統
4. 保持比例：

javascript
function maintainAspectRatio(canvas, aspectRatio) {
    const container = canvas.parentElement;
    const containerWidth = container.clientWidth;
 canvas.width = containerWidth;
 canvas.height = containerWidth / aspectRatio;
}

最佳實踐建議：

1. 根據使用場景選擇適當方案：
   • 遊戲開發：固定比例但可縮放
   • 繪圖應用：可能需要完全響應式
   • 數據視覺化：通常採用容器寬度響應
2. 考慮效能優化：
   • 使用 requestAnimationFrame 進行動畫
   • 實現適當的事件節流
   • 可能的話，使用離屏 canvas 進行繪製
3. 瀏覽器兼容性處理：
   • 測試不同瀏覽器的 devicePixelRatio 實現
   • 確保 CSS transform 的跨瀏覽器支援