javascript - 如何从较小的 Canvas 上获得高分辨率图像？

Question

我在我的网络应用程序中使用一张 Canvas ，它的实际高度和宽度均为 500 像素。我在屏幕上将此 Canvas 显示为 500 像素正方形，但我希望从该 Canvas 导出图像为 1600 像素正方形。我尝试了下面的代码，但没有成功。

canvas.width = 1600;
canvas.style.width = 500;

任何帮助将不胜感激。

Answer 1

您可以让 Canvas 以 500 像素显示，同时分辨率仍为 1600 像素。显示尺寸和分辨率是独立的。对于分辨率，您可以设置 Canvas 的宽度和高度属性。对于显示尺寸，您可以设置 Canvas 样式宽度和高度属性。

// create a canvas or get it from the page
var canvas = document.createElement("canvas");
// set the resolution (number of pixels)
canvas.width = canvas.height = 1600;
// set the display size
canvas.style.width = canvas.style.height = "500px";
// get the rendering context
var ctx = canvas.getContext("2d");

要使渲染与显示尺寸匹配，您需要放大所有渲染。您可以通过将变换比例设置为 Canvas 分辨率除以显示尺寸来实现此目的

var scale = 1600 / 500; // get the scale that matches display size 
ctx.setTransform(scale,0,0,scale,0,0);

现在，当您渲染到 Canvas 时，您将使用屏幕尺寸坐标。

ctx.fillRect(0,0,500,500); // fill all of the canvas.
ctx.fillStyle = "red";  // draw a red circle 100 display pixels in size.
ctx.beginPath();
ctx.arc(250,250,100,0,Math.PI * 2);
ctx.fill();

当您保存 Canvas 时，无论您使用什么方法，只要不是屏幕截图，保存的 Canvas 都将是 1600 x 1600，并且所有渲染都将正确定位和成比例