javascript - 没有内联样式的 Canvas 网格是不正确的

<分区>

我将在 Canvas 元素中绘制一个网格。为此，我使用 moveTo 和 lineTo 方法。当 Canvas 元素必须像本元素中那样内联样式时，网格不正确:jsfiddle.net/yzL4ruhf/

当 canvas 元素中有内联样式时，它是正确的。 (jsfiddle.net/7w4qvyfa/4/)

谁能解释一下区别？谢谢!

最佳答案

默认情况下， Canvas 上下文的大小为 300x150 像素。 1

您可以将 Canvas 想象成具有固定大小的图像。如果通过在 CSS 中设置宽度和高度来放大图像，它将变得像素化和模糊。 Canvas 也会发生同样的事情。

通过在 canvas 元素本身上设置宽度和高度属性，您实际上是在告诉它使用更大的上下文，从而创建更大的图像，因此它不会变得模糊和像素化。

如果您希望避免在 HTML 代码中设置这些属性，您可以改为在 javascript 中设置它们:

context.canvas.width = 501;
context.canvas.height = 381;

关于javascript - 没有内联样式的 Canvas 网格是不正确的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54951394/

相关文章：

javascript - 您如何阻止复制和粘贴阻止程序？