全屏画布是低分辨率[重复]

Question

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

CSS：

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

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

function initCanvas() {
    $('#canvas').width($(window).width());
    $('#canvas').height($(window).height());
}

用画线

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

结果

JSFiddle

您可以看到该行显示为低分辨率。我想要一个全窗但看起来很锐利的画布。

注意：我将绝对位置和 z-index -1 用于画布，因为我希望它出现在我稍后在页面上添加的任何其他内容的后面。

Answer 1

演示 http://jsfiddle.net/U5XrK/3/

问：我想要一个全窗但看起来很锐利的画布。

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

---

代码：

// 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 调整生成的图像大小时，画布的原始渲染大小不会受到影响，因此基本上您是在尝试放大较小的图像，这会导致质量较低。如果您的画布在创建时具有预期的大小，则不会出现此缩放问题。

Answer 2

Canvas consists of a drawable region defined in HTML code with height and width attributes.

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

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

Answer 3

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

• 元素，通过元素的style 属性或css 调整大小。这些尺寸用于呈现文档中的元素。
• 画布区域，大小由元素的width 和height 属性决定。这些尺寸用于通过其上下文在画布上绘图。

您正在使用 jQuery 的 width() 和 height() 方法成功调整元素的大小，它们是更改 element.style.width 和 element.style.height 的简写。

您所缺少的只是设置画布的区域，这是画布元素的一个属性。你可以使用 jQuery 的 prop() 方法来做到这一点：

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

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

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

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

最后，here is a fiddle

Answer 4

试试这个

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

我们不能使用 css 设置画布元素的宽度和高度，因为它不会像文档所说的那样正确呈现。你必须设置它的

或者你必须使用

function initCanvas() {
    $('#canvas').attr("width",$(window).width());
   $('#canvas').attr("height",$(window).height());
}

DEMO

Answer 5

你应该使用下面的方法：

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();