为什么较大尺寸的 HTML5 Canvas 会拉伸绘制的线条？答案

【问题标题】：Why HTML5 Canvas with a larger size stretch a drawn line?为什么较大尺寸的 HTML5 Canvas 会拉伸绘制的线条？
【发布时间】：2011-06-16 10:30:40
【问题描述】：

我正在使用 HTML5 <canvas> 在上面画线。

当我将尺寸从默认的 300x150 更改为与另一个 <div> 的尺寸相匹配时，我的线条看起来被拉伸并且比以前更粗。为什么会这样？

我想在画布上绘制线条以匹配页面上相同位置中位于其前面的<div> 上元素的位置（具有更高的z-index）。我怎样才能阻止这种拉伸的发生？

编辑：这似乎只存在于 Firefox 中。

【问题讨论】：

【解决方案1】：

您无法使用 CSS 更改画布大小。如果你这样做，它将表现得像一个图像，它会拉伸你必须在 javascript 中使用 canvas 属性 canvas.width、canvas.height

【讨论】：