清除整个，转换的HTML5画布，同时保留上下文转换 [英] Clear entire, transformed HTML5 Canvas while preserving context transform

问题描述

我想通过使用 translate（）和 scale（）转换上下文来缩放和平移HTML5画布，清除画布，然后重画。请注意，我明确不是在我的转换周围调用 save（）和 restore（）

如果我执行标准 ctx.clearRect（0,0，ctx.canvas.width，ctx.canvas.height）那么整个可见的画布不会被清除;缩小或平移可能会导致此初始矩形不能完全覆盖绘图区域。

如果我执行Webkit友好的清除方法...

  var w = canvas.width; 
 canvas.width = 0; 
 canvas.width = w; 
  

...然后重置上下文的累积转换。

如何在不丢失我的转换的情况下清除整个画布上下文？

解决方案

像你这样的转换信息大概是做了其他几个人迄今为止做的（像cake.js和我自己的库，两个）。我认为这样做对于任何大型画布库来说都是必然的。

甚至对mozilla抱怨的是Ilmari的cake.js：
https://bugzilla.mozilla.org/show_bug.cgi?id=408804

您可以用清晰的方法调用save / restore：

  //我现在有很多变换
 ctx.save（）; 
 ctx.setTransform（1,0,0,1,0,0）; 
 //总是清除正确的空间
 ctx.clearRect（0,0，ctx.canvas.width，ctx.canvas.height）; 
 ctx.restore（）; 
 //仍然有我的旧转换
  

p>

I want to zoom and pan an HTML5 Canvas by transforming the context using translate() and scale(), clearing the canvas, and then redrawing. Note that I am explicitly not calling save() and restore() around my transformations.

If I perform the standard ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height) then the entire visible canvas will not be cleared; downscaling or panning may cause this initial rectangle to not exactly cover the drawing area.

If I perform the Webkit-friendly clearing method...

var w=canvas.width;
canvas.width = 0;
canvas.width = w;

...then the cumulative transformation of the context is reset.

How can I best clear the entire canvas context without losing my transformation?

解决方案

Keeping track of all the transformation information like you are presumably doing is what several others so far have done (like cake.js and my own library, for two). I think doing this will pretty much be an inevitability for any large canvas library.

Ilmari of cake.js even complained to mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=408804

You could instead call save/restore around your clear method:

// I have lots of transforms right now
ctx.save();
ctx.setTransform(1,0,0,1,0,0);
// Will always clear the right space
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.restore();
// Still have my old transforms

Won't that satisfy your case?

这篇关于清除整个，转换的HTML5画布，同时保留上下文转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！