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

Question

当人们连续拨打clip()，translate()或scale()时，HTML5画布的行为如何？

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();

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

翻译

翻译是累积的。

因此，调用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();

将绘制这个：