调整画布大小而不裁剪

Question

我一直遇到用画布生成图像的问题，但是当我在CSS中更改尺寸时，尺寸不会改变。 例如：假设我在画布中创建了一个200px x 200px的正方形图像。 然后在CSS中，将尺寸设置为100px x 100px。 除了缩放图像外，仅显示原始图像的1/4。 如何在不实际更改画布本身的情况下缩放画布？

Answer 1

结果是预期的。

您的矩形未裁剪，正在调整大小 。

• 200x200画布具有40,000像素
• 100x100画布具有10,000像素

较小的画布为较大画布的1/4，矩形为1/4。

在不了解您的设计要求的情况下，您可能想避免使用CSS缩放画布 。 如您所知，使用CSS更改宽度/高度将“拉伸/缩小”工程图的大小。

相反，请更改canvas元素的宽度/高度，而不是CSS宽度/高度。 当您更改画布元素的宽度/高度时，您已经完成的所有绘图都将被删除（您必须重新绘制这些绘图）。 但是新图纸的尺寸将“正确”。

当您想要调整画布大小（使用javascript）时：

var canvas = document.getElementById("myCanvas");
canvas.width=100;
canvas.height=100;

// changing the canvas width/height will automatically erase and drawings
// so you must now redraw those drawings.

如果要缩放画布而不必重新绘制，可以执行以下操作：

var img=new Image();
img.onload=function(){
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    canvas.width=100;
    canvas.height=100;
    ctx.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height);
}
img.src=canvas.toDataURL();