如何从HTML画布缩放绘图并将其复制到另一个画布？

Question

如果我在画布上画一些东西，我想按保存，然后按比例缩放图形的图像以适应页面另一部分的较小画布。我认为它与绘图的base64 src有关，但我不完全确定它是如何完成的。

假设我绘制的原始画布是600px乘400px而较小的画布是300px乘150px，那么代码是什么样的？

Answer 1

由于这两个画布有不同的宽高比，我会使用以下语法：

ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

在这种情况下，sx，sy，sWidth和sHeight指定原始画布的哪一部分应该被复制，而dx，dy，dWidth和dHeight指定它们应该呈现在画布的哪个部分。

const canvas1 = document.getElementById("c");
const ctx1 = canvas1.getContext("2d");
			
ctx1.beginPath()
ctx1.arc(125,125,100,0,2*Math.PI);
ctx1.stroke()

const canvas2 = document.getElementById("c1");
const ctx2 = canvas2.getContext("2d");

ctx2.drawImage(canvas1,0,0,600,400,0,0,300,150);

canvas{border:1px solid}

<canvas id="c" width="600" height="400"></canvas>
<canvas id="c1" width="300" height="150"></canvas>