Javascript 全屏画布是低分辨率的

我已经看了这里的问题并遵循了答案，但我的画布分辨率仍然很低：

CSS:

#canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

// Draw on canvas
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
c.width = $(window).width();   // Add this to your code
c.height = $(window).height(); // Add this to your code
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

JS：初始化画布（页面加载时调用一次，窗口调整时再次调用）

用

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

结果

你可以看到这条线的分辨率很低。我想要一张满窗但看起来很锐利的画布

---

注意：我使用绝对位置和z索引-1作为画布，因为我希望它显示在我稍后添加到页面上的任何其他内容后面。

U应使用以下方法：

var c = document.getElementById("canvas");
c.width = 500;
c.height = 500;
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

试试这个

 <canvas id="canvas" width="500" height="500">
</canvas>

演示

Q:我想要一张满窗但看起来很锐利的画布

A:将画布的宽度和高度设置为与窗口在画布中的启动时间相同：

---

代码：

#canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

// Draw on canvas
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
c.width = $(window).width();   // Add this to your code
c.height = $(window).height(); // Add this to your code
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

---

---

说明：当您使用CSS调整生成图像的大小时，画布的原始渲染大小不会受到影响，因此基本上您是在尝试放大较小的图像，这会导致较低的质量。如果画布在创建时具有预期的大小，则不会出现此缩放问题。

画布有两个单独的宽度/高度值：

• 元素，通过元素的

  样式

  属性或css调整大小。这些维度用于呈现文档中的元素
• 画布区域，根据元素的

  宽度

  和

  高度

  属性调整大小。这些尺寸用于通过画布的上下文在画布上绘制

您正在使用jQuery的

width（）

和

height（）

方法成功地调整元素的大小，这是更改

element.style.width

和

element.style.height

的缩写

您所缺少的只是设置画布的区域，它是canvas元素的一个属性。您可以使用jQuery的

prop（）

方法执行此操作：

$('#canvas').prop({
    width: x,
    height: y
});

或者，如果您想一次完成所有工作：

var dimensions = {
    width: x,
    height: y
};

$('#canvas').css(dimensions).prop(dimensions);

最后

当你给它的CSS宽度/高度赋值时——这类似于对IMG元素做同样的事情——你是在缩放它，而不是设置它的实际尺寸

---

因此，您应该为实际尺寸设置画布的HTML属性，而不是CSS。

您要将宽度/高度设置为500px？这不是我想要的。你可以把它改成c.width=window.innerWidth；c、 高度=窗内高度；比我快+1:）[在脸上打自己]