全屏幕画布是低分辨率 [英] Full-screen Canvas is low res

问题描述

我在这里查看了问题并按照答案进行了操作，但我的画布仍然是低分辨率：

I've looked at the questions here and followed the answers but my canvas is still low resolution:

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

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

You can see that the line appears low res. I would like a canvas that is full window but appears sharp.

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

NB: I use absolute position and z-index -1 for canvas because I would like it to appear behind anything else I later add on the page.

推荐答案

试试这个

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

我们无法使用css设置canvas元素的宽度和高度，因为它不会正如文档所说，正确呈现。您必须设置

We can't set the width and height of the canvas element using css, since it won't get rendered properly as document says. You have to set its

或者您必须使用

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

这篇关于全屏幕画布是低分辨率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！