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更改宽度/高度将＆＃34;拉伸/缩小＆＃34;你的图纸大小。

相反，更改画布元素的宽度/高度，而不是CSS宽度/高度。当您更改画布元素的宽度/高度时，您已经完成的任何绘图都将被删除（您必须重绘这些绘图）。但新图纸将正确地＃34;大小

如果要调整画布大小（在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();

调整画布大小而不裁剪

1 个答案: