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。

posted @ 2024-11-26 06:10  王铁柱6  阅读(382)  评论(0)    收藏  举报