作者:有些事想不到 | 来源:互联网 | 2023-05-28 12:08
如何当一个让连续调用到HTML5画布的行为clip()
,translate()
还是scale()
?
1> Izhaki..:
夹()
调用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();
将得出此: