html5剪辑画布

Question

我有一个画布但想要剪切并仅显示此画布的各种矩形部分 我不确定这是否可行？我看到有些人剪辑了一张图片，但它可以用于画布。

基本上我想绘制直角，保留矩形位并丢弃画布的其余部分

        ctx.save();
        ctx.beginPath();
        ctx.rect(140, 20, 100, 100);
        //ctx.stroke();
        ctx.clip();

       ctx.restore();

Answer 1

我是这样做的：

        ctx.beginPath();

        for (var i = 0; i < Rectangles.length; i++) {
            var item = Rectangles[i];



            ctx.moveTo(item.x1 , item.y1 );
            ctx.lineTo(item.x1  + item.width  , item.y1 );
            ctx.lineTo(item.x1  + item.width  , item.y1 + item.height  );
            ctx.lineTo(item.x1 , item.y1 + item.height  );
            ctx.lineTo(item.x1 , item.y1 );


        }
        ctx.closePath();
        ctx.clip();

在绘图部分之前运行它。