改变HTML Canvas的分辨率

Question

我正在尝试更改HTML画布的分辨率（而不是宽度和高度）。画布应保持与屏幕相同的宽度和高度，但渲染分辨率可更改。我可以通过使用浏览器中的缩放功能来部分复制所需内容，但我想知道是否有编程方法来实现这一点。以下是我尝试过的内容：

function resize() {
    screenWidth = mathRound(window.innerWidth);
    screenHeight = mathRound(window.innerHeight);
    calculateUIScale();
    var scaleFillNative = Math.max(screenWidth / maxScreenWidth, screenHeight / maxScreenHeight);
    c.width = screenWidth;
    c.height = screenHeight;
    graph.setTransform(scaleFillNative, 0, 0, scaleFillNative, ((screenWidth - (maxScreenWidth * scaleFillNative)) / 2), ((screenHeight - (maxScreenHeight * scaleFillNative)) / 2));
    graph.imageSmoothingEnabled = false;
    graph.webkitImageSmoothingEnabled = false;
    graph.mozImageSmoothingEnabled = false;
}

这使得画布适合屏幕。我想知道是否可以通过某种方式缩放画布元素以模拟不同的分辨率。

我尝试过这样做：

c.width = 40;
c.style.width = 400;

但是现在画布非常小。

- user3024235

---

你可以使用CSS来拉伸或缩小它，这在高清屏幕上非常有用，但一定要保持纵横比，所有坐标也将被缩放（例如，如果您使用鼠标事件监听器）。 - Kaiido

canvas 的 width 和 height 属性定义了画布包含的像素数量。相应的 CSS 属性定义了画布的尺寸（一旦设置）。如果这两组尺寸不同，你就在缩放画布上的像素；无论是缩小还是放大。 - Thomas

https://jsfiddle.net/5ezwn4g9/ - Thomas

@Thomas 我已经尝试设置 canvas.width = 40; 和 canvas.style.width = 400，但是没有起作用。 - user3024235

“没有成功”并不是一个非常精确的描述，你应该说明你做了什么、期望发生了什么以及实际发生了什么。同时，我不确定你对“更改画布分辨率”的理解和我的是否一致，请说明你尝试实现的目标，以及你的实现方法。 - Thomas

我正在尝试让画布以较小的分辨率进行渲染。因此，质量会降低，但画布的大小保持不变。就像大多数视频游戏一样，当您更改分辨率但保持全屏时。 - user3024235

Answer 1

所有CSS大小都要求指定单位，如果给出非零值：需要指定单位：

长度值的格式（在本说明中表示为）是一个数字（带或不带小数点），后面紧跟着一个单位标识符（例如px、em等）。在零长度之后，单位标识符是可选的。

因此，只需在将其作为字符串的数字后添加一个单位即可：

c.width = 40;
c.style.width = "400px";  // add pixel unit

或者动态地：

c.style.width = (c.width * 10) + "px";

var ctx = c.getContext("2d");

c.width = 40;
c.height = 12;
c.style.width = (c.width * 8) + "px";
c.style.height = (c.height * 8) + "px";

ctx.lineWidth = 2;
ctx.strokeRect(0,0,c.width,c.height);

<canvas id=c></canvas>

- user1693593

Answer 2

如果您想放大页面的所有内容，请尝试将以下代码添加到您的html元素或整个body的CSS中：

* {
transform: scale(1.5);
}

jQuery也可以使用：

$(this).css({
    '-webkit-transform': 'scale(1.5)',
    '-o-transform': 'scale(1.5)',
    '-moz-transform': 'scale(1.5)',
    '-ms-transform': 'scale(1.5)',
    'transform': 'scale(1.5)'
});

我希望这能有所帮助。

http://codepen.io/jiemushi/pen/Vjjgaj

- Vinz

---

我不想改变游戏等的UI比例，只改变画布。但是我能否在画布元素上使用您发送的代码来实现相同的效果？ - user3024235

哎呀，这会降低画布的分辨率。您可能希望在增加画布的宽度和高度属性时执行反向操作。 - Kaiido

画布肯定会变大，但内容也会变大。我建议有一个画布div和一个内部div。扩大外部div并缩小内部div。http://codepen.io/jiemushi/pen/Vjjgaj - Vinz

Answer 3

在标题中使用“resolution”这个词是令人困惑的，因为它与...有关。

 var PR=window.devicePixelRatio;

......等等，但进一步阅读您的帖子后，发现您想要的是将您的画布内容缩放以适应任何屏幕尺寸，如果我没听错的话。

如果是这种情况，您需要找的是：

context.scale(scalewidth,scaleheight);  // 0.5=50%, 1=100%, 2=200%, etc

虽然晚了7年！ :)

- yourtemp