HTML5 Canvas-连续调用clip（），translate（）和scale（）会发生什么？

Question

如何当一个让连续调用到HTML5画布的行为clip()，translate()还是scale()？

Answer 1

夹（）

调用clip（）之前的许多路径

如果在调用beginPath()和之间绘制了多条路径clip()，则所有路径都将用作单独的剪辑区域。

因此，使用此代码（jsfiddle）：

// Clip
iContext.beginPath(); 
iContext.rect( 10, 10, 10, 10 );
iContext.rect( 30, 30, 10, 10 );
iContext.clip();

// Draw rect
iContext.beginPath();
iContext.rect( 0, 0, 100, 100 );
iContext.fill();

结果将是：

多次调用clip（）

调用clip()不止一次时（不调用save()且restore()在两次调用之间），生成的剪切区域是所有剪切路径的交集。

所以这段代码（jsfiddle）：

// First Clip
iContext.beginPath();
iContext.rect( 10, 10, 30, 30 );
iContext.clip();

// Second Clip
iContext.beginPath();
iContext.rect( 30, 30, 30, 30 );
iContext.clip();

// Draw rect
iContext.beginPath();
iContext.rect( 0, 0, 100, 100 );
iContext.fill();

将导致此相交的剪辑区域：

翻译

翻译是累积的。

因此，先呼叫a translate( 10, 10 )，然后translate( 30, 30 )再进行的整体翻译( 40, 40 )。

因此调用此代码（jsfiddle）：

// First Clip
iContext.translate( 10, 10 );
iContext.translate( 30, 30 );

// Draw rect
iContext.beginPath();
iContext.rect( 0, 0, 10, 10 );
iContext.fill();

将得出：

规模（）

规模是累积的。

因此，致电scale( 2, 2 )两次将使总体规模为(4, 4)。

这段代码（jsfiddle）：

// First Clip
iContext.scale( 2, 2 );
iContext.scale( 2, 2 );

// Draw rect
iContext.beginPath();
iContext.rect( 0, 0, 10, 10 );
iContext.fill();

将得出此：