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

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

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

您正在使用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);

最后，here is a fiddle

Answer 3

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

问：我想要一个完整窗口但看起来很清晰的画布。

A：将画布的宽度和高度设置为与画布的初始化时间相同：

<小时/> 的代码：

// 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 4

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

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

所以你应该设置画布＆＃39;实际维度的HTML属性，而不是CSS。

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

全屏幕画布是低分辨率

5 个答案:

DEMO