Javascript 调整画布大小而不进行裁剪

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

预期结果

您的矩形没有被裁剪，它正在调整大小

• 200x200画布具有40000像素
• 100x100画布有10000个像素

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

在不了解设计需求的情况下，您可能想做的是避免使用CSS缩放画布。正如您所发现的，使用CSS更改宽度/高度将“拉伸/收缩”图形的大小

相反，更改画布元素的宽度/高度，而不是CSS的宽度/高度。更改画布元素的宽度/高度时，已绘制的任何图形都将被删除（必须重新绘制这些图形）。但新图纸的尺寸将“正确”

如果要调整画布的大小（在javascript中）：

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

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();

---

我真的想把我的画布画上。但你所说的css“正如你所发现的，用css改变宽度/高度将“拉伸/收缩”你的图形大小。”不起作用：你的小提琴调整画布元素的大小，而不是css样式。你可以像这样用CSS收缩：干杯！

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();