在JavaScript畫布上縮放或修剪線條（描邊）

Question

我有透明畫布（200x200）。 然后，對象使用實線（lineTo方法）在此畫布上一行一行地繪制。 我需要在ctx.stroke（）之前或之后使該對象全角； 。

Answer 1

您可以像這樣將繪圖縮放到整個畫布寬度：

• 將所有moveTo和lineTo坐標保存在數組中。
• 找到最大和最小X坐標值。
• 計算圖形的寬度： var drawingWidth = maxX - minX 。
• 通過從數組中的每個X坐標減去minX，將圖形移動到畫布的左邊緣。
• 計算將圖紙縮放到畫布的整個寬度所需的因子： var scale = canvas.width / drawingWidth 。
• 告訴畫布縮放到所需的因子： context.scale(scale,scale)
• 清除畫布，然后重新繪制所有保存的坐標。
• 通過縮放畫布進行清理： context.scale(-scale,-scale) -scale，-scale context.scale(-scale,-scale)