html5 剪辑画布

【问题标题】：html5 clip a canvashtml5 剪辑画布
【发布时间】：2014-10-06 11:53:06
【问题描述】：

我有一个画布，但想剪切并只显示该画布的各个矩形部分我不确定这是否可能？我见过有人剪辑图像，但可以为画布完成。

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

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

       ctx.restore();

【问题讨论】：

Raklos 你试过html5canvastutorials.com/advanced/… 吗？
您的问题是什么？从您的问题来看，您似乎手头有所有牌。

标签： html html5-canvas

【解决方案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();

并在绘图部分之前运行它。

【讨论】：