如何缩放已在画布上绘制的内容

Question

我做了一个绘图软件。 但是当我放大时，由于我重画了很多屏幕，所以它变得迟钝了。 我可以做与此页面相同的事情吗： http : //fooplot.com/

当它们缩小时，它会放大或缩小预绘制的图形，然后在我们停止放大时重新绘制。

.scale(2,2); 似乎根本没有任何规模。 我的图完全使用ctx.fillRect（）绘制。

告诉我你是否需要代码

Answer 1

您可以使用画布作为自己的drawImage来源来“快速缩放”：

演示： http : //jsfiddle.net/m1erickson/Yyc5G/

var zoom=2;

function zoom(){

    ctx.save();

    ctx.translate(canvas.width/2,canvas.height/2);  // or your desired zoom point

    ctx.scale(zoom,zoom);

    ctx.drawImage(canvas,-canvas.width/2,-canvas.height/2); 

    ctx.restore();

}

可以快速缩放（是的，有锯齿）。

然后，当用户停止缩放时，您可以进行更好的质量重绘。