Html5 canvas 在不扭曲线宽或破坏剪辑的情况下缩放画布

我想在图纸中缩放一个轴。正如其他人所指出的那样，天真地这样做也会在笔划路径时缩放线宽。其他解决方案还指出，可以执行以下操作以避免扭曲线宽：

ctx.save();
ctx.scale(1, 2);
ctx.beginPath();
// draw shape
ctx.restore();
ctx.stroke();

不幸的是，我还需要一个复杂的剪辑区域，restore（）会破坏剪辑区域。我试着简单地恢复比例：

ctx.save();
ctx.scale(1, 2);
ctx.beginPath();
// draw shape
ctx.scale(1, 1);
ctx.stroke();

但这不起作用，线宽仍然扭曲

这是一个物理系统的建模，涉及的形状包括圆弧和直线。重要的是，各种形状的交点必须精确，因此在没有剪辑的情况下计算所有可能的交点要困难得多。同样，如果不使用比例，也会产生椭圆曲线，这是我试图避免的，但这是最后的选择

---

有什么想法吗？

我不太清楚您到底在做什么，我想您可以使用它来避免剪辑，因为它在大多数情况下提供了更好的性能和更清晰的结果

但无论如何，让我们假设你绝对想剪辑

---

ctx.save（）。每次调用
restore（）
只会还原
pop
ped out元素（即堆栈中最新的元素）

因此，您只需在这两个操作之间调用
ctx.save（）
，就可以很好地恢复缩放前、剪裁后的状态


ctx=c.getContext（'2d'）；
ctx.save（）；//堆叠第一个状态而不剪切，以防万一
//定义我们的剪辑区域
ctx.arc（53,50,30,0，数学PI*2）；
ctx.stroke（）；
ctx.clip（）；
//以正常比例绘制一次
drawShape（）；
ctx.strokeStyle='蓝色'；
ctx.stroke（）；
//在缩放之前保存上下文状态
ctx.save（）；
//现在按比例绘制
ctx.刻度（2,1）；
drawShape（）；
//在应用比例之前恢复到
ctx.restore（）；
ctx.strokeStyle=‘红色’；
ctx.stroke（）；
//剪辑前还原
ctx.restore（）；
//下一张图纸将被解开。。。
函数drawShape（）{
ctx.beginPath（）；
ctx.rect（25,30,20,20）；
}
你能提供一个代码片段来重现你的问题吗？Doh！当然，scale（1，1）是不可行的。我用“destination out”结束剪辑，效果很好。在我无意中发现之前，我试着用rbga（0，0，0，0）填充剪辑形状，但这不起作用，因为它是在原始图形上合成的，而不是清除它。不管怎样，谢谢你帮我澄清。