全屏幕画布是低分辨率

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

试试这个

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

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

或者你必须使用

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

DEMO

Answer 2

你应该使用下面的方法：

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