canvas标签clip剪切任意大小的形状。
剪切画布
<script>
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
// 剪切矩形区域
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// 在 clip() 之后绘制绿色矩形
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
</script>| 说明字段 | 描述 |
|---|---|
| document.getElementById("myCanvas2") | 返回文档id属性为"myCanvas2"的对象 |
| getContext("2d") | getContext() 返回画布上绘图的环境。getContext("2d") 返回绘制类型（2 维）的环境，未来可能会支持3维，但现在支持2维。 |
| rect(50,20,200,120) | rect() 新建矩形路径（包含划线），X坐标为50，Y坐标为20，矩形路径宽为200像素，矩形路径高为120像素。 |
| stroke() | 以笔触的形式根据当前路径划线。 |
| clip() | 剪切画布 |
| fillStyle="green" | fillStyle 属性设置用于填充绘画的颜色、渐变或模式。这里设置填充颜色，颜色为"green"绿色 |
| fillRect(0,0,150,100) | fillRect() 绘制"已填充"的矩形，绘制X坐标为0，Y坐标为0，矩形宽为150像素，矩形高为100像素。这里对应是剪切后的区域，而非画布 |
 | 一旦剪切了某区域，之后的绘话都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，可在以后的任意时间对其进行恢复（通过 restore() 方法）。 |
注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。
context.clip();
