使用HTML5 Canvas API中的clip()方法裁剪区域图像

这样以后我们不管在context中做了什么操作，只有限定的部分显示出来。也就是说clip()的作用是限定要显示的区域。当我们不希望继续限定区域了，可以使用restore()方法跳出来，继续操作原来的context。
再来看这样一个裁剪：

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();   

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!