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

Question

这个问题在这里已有答案：

• Canvas is stretched when using CSS but normal with “width” / “height” properties 7个答案
• Why box-sizing is not working with width/height attribute on canvas element? 1回答

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

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

有人可以解释这个区别吗？谢谢！

Answer 1

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

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

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

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

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

Answer 2

检查这个answer，所以你必须使用宽度/高度属性，或者可以使用这样的javascript。

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