canvas預設畫布的尺寸是多大？怎樣設定才能不會變形？

王铁柱6發表於2024-11-26
Canvas

預設情況下，<canvas> 元素的尺寸是 300 畫素寬，150 畫素高。 這指的是元素本身在頁面上佔據的空間大小。

關鍵在於區分 元素尺寸 和 繪圖表面尺寸。 變形通常發生是因為這兩個尺寸不一致。 瀏覽器會將繪圖表面拉伸或壓縮以適應元素尺寸。

為了避免變形，你需要顯式地設定繪圖表面尺寸，使其與元素尺寸匹配。 這可以透過 HTML 屬性或 JavaScript 來完成。

1. 使用 HTML 屬性:

這是最簡單的方法，直接在 <canvas> 標籤中設定 width 和 height 屬性:

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

這將建立一個 500x300 畫素的畫布。 重要: width 和 height 屬性應該使用沒有單位的純數字表示畫素值。

2. 使用 JavaScript:

如果你需要動態地設定畫布大小，可以使用 JavaScript:

const canvas = document.getElementById('myCanvas');
canvas.width = 500;
canvas.height = 300;

這與 HTML 屬性的效果相同。 注意: 透過 JavaScript 設定 width 和 height 屬性會清空畫布內容。

3. CSS 樣式:

雖然可以使用 CSS 來設定 <canvas> 元素的尺寸，但這隻影響元素的大小，而不影響繪圖表面。 如果繪圖表面尺寸與元素尺寸不同，影像就會被拉伸或壓縮。 因此，強烈建議使用 HTML 屬性或 JavaScript 來設定畫布大小，避免使用 CSS 樣式來控制畫布尺寸，除非你明確知道自己在做什麼並且需要縮放效果。

示例：避免變形

<!DOCTYPE html>
<html>
<head>
<title>Canvas Example</title>
<style>
  /*  使用CSS設定canvas元素的尺寸，但不會影響繪圖表面 */
  #myCanvas {
    border: 1px solid black; /* 只是為了顯示canvas邊界 */
  }
</style>
</head>
<body>

<canvas id="myCanvas"></canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  // 正確：設定繪圖表面尺寸
  canvas.width = 500;
  canvas.height = 300;

  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.fillRect(10, 10, 50, 50); // 繪製一個正方形

  // 錯誤示範：只設定CSS樣式，會導致變形
  // canvas.style.width = "250px";
  // canvas.style.height = "150px";
</script>

</body>
</html>

透過遵循以上方法，確保元素尺寸和繪圖表面尺寸一致，就可以避免 <canvas> 繪圖變形的問題。 記住，關鍵在於使用 HTML 屬性或 JavaScript 直接設定 canvas.width 和 canvas.height。

相關文章