最新的Web开发教程
 

HTML canvas clip() Method

<画布对象

的从画布200个* 120像素的矩形区域的剪辑。 然后,画一个红色矩形。 红色矩形是剪切区域内的只有部分是可见的:

YourbrowserdoesnotsupporttheHTML5canvastag。

JavaScript的:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Clip a rectangular area
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip()
ctx.fillStyle="red";
ctx.fillRect(0,0,150,100);
</script>
试一试»

浏览器支持

在表中的数字规定,完全支持方法的第一个浏览器版本。

方法
clip() 4 9 3.6 4 10.1

定义和用法

clip()方法剪辑从原来的画布任何形状和尺寸的区域。

Tip:一旦一个区域被修剪,未来所有的绘图将被限制在修剪的区域(no access to other regions on the canvas) 但是,您可以保存使用当前画布区域save()使用方法之前clip()方法,并恢复它(with the restore()方法)的任何时间在未来。

JavaScript语法: contextclip() ;

<画布对象