如何缩放HTML画布中的图形并将其复制到另一个画布？

Question

如果我在画布上绘制某些内容，我想按保存，然后按保存比例将绘图的图像放到页面另一部分的较小画布上。我认为这可能与图形的base64 src有关，但我不确定如何完成。

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

Answer 1

由于两个画布的纵横比不同，因此我将使用以下语法：

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

在这种情况下，sx，sy，sWidth和sHeight指定应复制原始画布的哪一部分，而dx，{{1 }}，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}