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

Question

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

假设我画的原始画布是 600 像素 x 400 像素，较小的画布是 300 像素 x 150 像素，那么代码会是什么样子？

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>