没有内联样式的画布网格不正确

Question

我将在画布元素中绘制一个网格。为此，我使用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，因此您必须使用width / height属性，或者可以使用类似的JavaScript来做到这一点。

.pivot_table