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

Posted 2023-03-05

【中文标题】全屏画布是低分辨率[重复]

【英文标题】：Full-screen Canvas is low res [duplicate]

【发布时间】：2014-08-31 08:24:02

【问题描述】：

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

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 用于画布，因为我希望它出现在我稍后在页面上添加的任何其他内容的后面。

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

【参考方案2】：

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

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

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

【参考方案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

【参考方案4】：

试试这个

 <canvas id="canvas"  >
</canvas>

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

或者你必须使用

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

DEMO

【讨论】：

打败了我。 +1 :)

[打自己的脸]

【参考方案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();

【讨论】：

您将宽度/高度设置为 500 像素？这不是我要找的。​​span>

U 可以改成 c.width = window.innerWidth;c.height = window.innerHeight;