canvas clicp

在HTML5 Canvas中,裁选区(clip region)可用于限制图像描绘的区域。其具体用法举例:

使用rect()函数选择一片区域。
使用clip()函数将该区域设定为裁选区。

设定裁选区之后,无论在Canvas元素上画什么,只有落在裁选区内的那部分才能得以显示,其余都会被遮蔽掉。以下是一个简单的例子:
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="800" height="800">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

function draw0(id) {
     var canvas = document.getElementById(id);
     if (canvas == null)
         return false;
     var context = canvas.getContext("2d");

		context.lineWidth = 12;
		context.strokeStyle = "red";
		
		context.save();
		
		context.rect(0,0,200,200);
		context.clip();
		
		context.beginPath();
		context.arc(200, 200, 100, (Math.PI/180)*0, (Math.PI/180)*360, false);
		context.stroke();
		context.closePath();
		
		context.restore();
		
		context.beginPath();
		context.arc(220, 220, 100, (Math.PI/180)*0, (Math.PI/180)*360, false);
		context.stroke();
		context.closePath();
 		
}

draw0("myCanvas");

</script>

</body>
</html>



canvas clicp

你可能感兴趣的:(canvas)