canvas画板里缩放和拖动

Question

用canvas做了一个画板，目前遇到的问题是绘制出来的canvas放大和缩小的问题。

部分代码：

            var nc = document.createElement("canvas");
            nc.width = canvas.width;
            nc.height = canvas.height;
            nc.getContext("2d").drawImage(canvas, 0, 0);
            var imgi = 0;
            imgi++;
            zoomVal = 1 + imgi / 10;
            
            clearContext();//清空
            context.translate(0,0);
            context.scale(zoomVal,zoomVal)
            context.drawImage(nc, 0, 0);

求大神指点canvas怎么缩放的，缩放后继续绘制的坐标变化怎么计算的

Answer 1

缩放就是scale ，你先save()在restore() 对坐标就没有影响了

Answer 2

1、你缩放目标应该是canvas中的矢量图形，并不是canvas本身
2、可以使用矩阵变换公式转换缩放后的图形坐标，然后绘制转换过的图形
3、缩放因子：中心点、缩放比率
4、参考我的Meek: https://github.com/DTFED2017/...