是否可以绘制比当前屏幕大的canvas？

Question

我正在将图像绘制到 canvas，这样做时图像会缩小到 canvas（这会降低质量），即使图像的大小与canvas，那是因为 img 很好地缩小了实际 img，而实际上它具有更大的 naturalheight 和 naturalwidth。我知道有可能使这种质量更好，但是我不需要实际显示 canvas 到 user/no 缩小比例的需要。因此我想知道是否有任何方法可以绘制比屏幕大的图像并将其固定在某个地方？听说有人在某处提到了一个盒子对象或一个相机对象，但不能真正利用这些信息。

请问，是否可以画出比屏幕大的canvas？那怎么办？

这是我在 atm 上使用的代码

var image = document.getElementById('insertedImg');
var height = $("#insertedImg").height();
var width = $("#insertedImg").width();
var c=document.getElementById("canvass");
var ctx=c.getContext("2d");
c.height=height;
c.width=width;
ctx.drawImage(image,0,0,width,height);

Answer 1

使用屏幕外 canvas，您只需创建一个新的 canvas 并相应地设置其高度和宽度。然后你可以将它附加到一个元素或将图像导出为 base64 字符串或任何你需要的。

//canvas is not visible unless appended to a DOM element
var canvas = document.createElement('canvas');
canvas.width = $("#insertedImg").height();
canvas.height = $("#insertedImg").width();
var ctx = canvas.getContext('2d');

//do the drawing, etc.
ctx.drawImage(...);

//export the image
var img = canvas.toDataURL("image/png");

是否可以绘制比当前屏幕大的canvas？

Is it possible to draw a canvas thats bigger than the current screen?

javascript

jquery

html5-canvas