如何缩放HTML5画布而不使其模糊？ [英] How can I scale the HTML5 canvas without making it blurry?

问题描述

我使用以下标记创建了画布：

I have created a canvas using the following markup:

<canvas id="canvas"></canvas>

现在，如果我指定 width 和 height ，然后在画布上绘制的图纸会非常清晰。

Now, if I specify width and height here directly, then the drawings on canvas will be pretty sharp.

<canvas id="canvas" width="600px" height="400px"></canvas>

但是，这样一来，我无法灵活缩放画布以覆盖所有屏幕尺寸。使用 vh 或 vw 代替像素也不起作用。我尝试在JavaScript中设置它们，例如：

but this way I can't scale the canvas flexibly to cover every screen size. Using vh or vw instead of pixels doesn't work either. I tried setting them in JavaScript like:

$('#canvas').css({
   "height": window.innerHeight,
   "width": window.innerWidth
 });

这覆盖了整个画布，但线条变得模糊。在画布仍覆盖整个屏幕的情况下，是否可以通过某种方式获得清晰的图像？

this covered the whole canvas but made the lines blurry. Is there some way I can get sharp images while the canvas still covers whole screen?

我尝试使用以下方法：

$("#canvas")
.prop("width", window.innerWidth)
.prop("height", window.innerHeight);

但是画布上的对象（例如我画的圆圈）仍然模糊。打开devTools时，看到以下标记：

but the objects on the canvas (for example a circle that I drew) are still blurry. When I open up devTools, I see the following markup:

<canvas id="canvas" style="height: 768px; width: 1366px;"></canvas>

因此，我想CSS仍在定义宽度和高度。

So, I guess width and height are still being defined by CSS.

推荐答案

Canvas CSS属性不会调整画布的大小，而是会调整其大小。

您可以使用JS来简单地更改属性：

Canvas CSS properties do not resize canvas, they rescale it.
You may simply change the properties with your JS:

$("#canvas")
    .prop("width", window.innerWidth)
    .prop("height", window.innerHeight); 

这篇关于如何缩放HTML5画布而不使其模糊？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！