在javascript画布上缩放或调整行（笔画）

Question

我有透明画布（200x200）。并且该对象使用实线笔划（lineTo方法）在此画布上逐行绘制。我需要在 ctx.stroke（）; 之前或之后将此对象设为全宽。

Answer 1

您可以将绘图缩放到完整的画布宽度，如下所示：

• 保存您的所有动作。 lineTo在数组中的坐标。
• 查找最大和最小X坐标值。
• 计算图纸的宽度：var drawingWidth = maxX - minX。
• 通过从数组中的每个X坐标中减去minX，将绘图移动到画布的左边缘。
• 计算将绘图缩放到画布的整个宽度所需的因子：var scale = canvas.width / drawingWidth。
• 告诉画布缩放到所需的因子：context.scale(scale,scale)
• 清除画布并重绘所有已保存的坐标。
• 通过取消缩放画布来清理：context.scale(-scale,-scale)