Canvas剪切畫布區域-13

js部分

    window.onload = function (params) {
            // 得到繪製源
            var c = document.getElementById('canvas');
            // 創建畫布，建立二維視角
            var ctx = c.getContext('2d');
            ctx.fillStyle='cyan';
            // 剪切矩形區域
            ctx.rect(50,20,200,120);
            ctx.stroke();
            // 剪切
            ctx.clip();
            // 剪切後畫的圖形不會超出原來的矩形區域
            ctx.fillStyle='red';
            // 矩形超出部分
            ctx.fillRect(0,0,250,80);
            ctx.moveTo(50,20);
            ctx.lineTo(250,150);
            ctx.stroke(); 
        }