想要保留喜欢的部分画图？API里其实有clip()这个方法能帮忙。设好图形的边缘线路，不用担心，不需要的部分统统都没了。就跟Flash里的图层遮罩似的，画面立马变得漂亮起来了！
Canvas上的clip()就像剪纸大师一样，帮我们剪裁出专属的图片或图形。首先，按照喜好画出想要剪碎的部分，再利用clip()就能得到你心中的剪切区域。不过要注意，剪完之后想复原可就难了。所以，这时候记得带上两个好帮手——save()和restore()，这样你的作品就可以放心大胆地剪！
save()和restore()方法的搭配使用
想要画出带范围又能调大小的图么？那可得好好学学Save()跟Restore()这两个小技巧先弄个Rect()搞出个矩形来，再用Clip()给它打上补丁。这样一来无论怎么乱跳乱动，最后看到肯定都是你框好的那部分~也就是说，Clip()可是决定我们能看见什么的大有人在！要是哪天你想解困，点下Restore()就完事儿！
JavaScript Code复制内容到剪贴板
裁剪区域
body { background: url("./images/bg3.jpg") repeat; }
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
你的浏览器居然不支持Canvas？！赶快换一个吧！！
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.fillStyle = "#FFF";
context.fillRect(0,0,800,600);
//在屏幕上绘制一个大方块
context.fillStyle = "black";
context.fillRect(10,10,200,200);
context.save();
context.beginPath();
//裁剪画布从(0，0)点至(50，50)的正方形
context.rect(0,0,50,50);
context.clip();
//红色圆
context.beginPath();
context.strokeStyle = "red";
context.lineWidth = 5;
context.arc(100,100,100,0,Math.PI * 2,false);
//整圆
context.stroke();
context.closePath();
context.restore();
//再次裁切整个画布
context.beginPath();
context.rect(0,0,500,500);
context.clip();
//绘制一个没有裁切的蓝线
context.beginPath();
context.strokeStyle = "blue";
context.lineWidth = 5;
context.arc(100,100,50,0,Math.PI * 2,false);
//整圆
context.stroke();
context.closePath();
};
混合使用save()和restore()
别忘了嘞：要用咯’SAVE’保存你的画布，然后就可以用’RESTORE’来恢复;想要调大调小你的画布的话，就在方形的调大小窗口里设置数字和单位！最后别忘了先剪辑过后再还原，换区域时也要记得这个步骤
调用顺序注意事项
想在画布上剪个形？没问题，跟着四步骤走起！首先，用rect()画出你要剪的范围；接着，用clip()把它给踢到画布外；别忘了用restore()恢复原来的样子，才能确保一切都好使。
路径与图片均可应用
你肯定不晓得Canvas还能当个裁缝？不仅能为图片剪个形状，还能剪出道路来！想要修画布边儿，就试试clip()魔法指令！这样就可以随心情自由设计，搞复杂图形也不费劲哒！
实例演示
别错过Canvas的剪辑神器！先画出一个矩形当作裁剪框，再用clip()将你的画放在框里面，就能自由发挥了。怎么涂鸦都只会出现在框框里；然后是保存与恢复神奇技能，完全由你掌握画布，想瞅哪儿就哪儿！
JavaScript Code复制内容到剪贴板
function drawScreen() {
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var offset = 50;
//裁剪的区域为 (x, y)为中心半径为75的圆
context.save();
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.clip();
// 先画一个蓝色的圆弧， 超过裁剪的部分不显示
context.beginPath();
context.arc(x - offset, y - offset, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'blue';
context.fill();
// 画一个黄色的圆弧， 超过裁剪的部分不显示
context.beginPath();
context.arc(x + offset, y, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'yellow';
context.fill();
// 画一个红色的圆弧， 超过裁剪的部分不显示
context.beginPath();
context.arc(x, y + offset, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'red';
context.fill();
/*
* restore()方法会返回到context原先的状态，在这里是clip()之前的状态。
* 大家可以移除context.beginPath()方法，试试会发生什么。
*/
context.restore();
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.lineWidth = 10;
context.strokeStyle = 'blue';
context.stroke();
}
总结与展望
看这个文章，教你怎么用Clip()这个函数裁剪画布上的图，别忘了还有Save()和Restore()这俩神奇工具它们能帮你随意地调整裁剪效果！懂了这俩技巧，你的作品肯定更精确、更有创意！将来canvas技术更新了，说不定还会有新技能等着你们去发现呢～。
评论0