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

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

    }  

再次强调，一般使用裁剪功能的调用形式是

save();
clip();
restore();
这个顺序来进行调用。

（编辑：焦作站长网）

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