没有内联样式的画布网格不正确[重复]答案

【问题标题】：Canvas grid is not correct without inline styling [duplicate]没有内联样式的画布网格不正确[重复]
【发布时间】：2019-03-02 04:30:18
【问题描述】：

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

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

有人能解释一下区别吗？谢谢！

【问题讨论】：

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

检查这个answer，所以你必须使用宽度/高度属性或者可以使用类似的javascript来做到这一点。

  c_canvas.width  = 501;
  c_canvas.height = 381;

【讨论】：