Question

我正在尝试为图像添加多个形状蒙版。我调用一个接收坐标并在屏幕上绘制形状方形的函数。这个方块显示了部分图像。这一次工作正常。之后，它没有重绘。我想要发生的是我在屏幕上绘制几个形状/蒙版以最终显示整个图像。

    var baseImg;
    var ctx;
    var img;
    var imageLoaded = false;
    var gridWidth = 50;
    var gridHeight = 50;

    function init() {
        baseImg = $('#baseImg')[0];
        ctx = baseImg.getContext('2d');
        img = new Image();
        imageLoaded = false;

        img.onload = function() {
            imageLoaded = true;
        }
        img.src = './images/tiles.jpg';
    };

    function showMask(maskCoord){
        if(!imageLoaded) return;

        var originPoint = {
            x : (gridWidth * maskCoord.x),
            y : (gridHeight * maskCoord.y)
        }

        ctx.beginPath();
        ctx.moveTo(originPoint.x, originPoint.y);
        ctx.lineTo((originPoint.x + gridWidth), originPoint.y);
        ctx.lineTo((originPoint.x + gridWidth), (originPoint.y + gridHeight));
        ctx.lineTo(originPoint.x, (originPoint.y + gridHeight));
        ctx.closePath();
        ctx.clip();

        /// draw the image to be clipped
        ctx.drawImage(img, 0, 0);
    }

这是我正在做的事情的链接。

http://jsfiddle.net/DezOnlyOne/CLYNA/4/

Answer 1

剪切时，可以缩小可以绘制到提供路径的区域。由于两个网格单元根本不相交，因此在多个单元格上进行裁剪将得到空结果。

解决方法是在下一次绘制之前“取消”上一次剪辑：save（）和restore（）是两个函数，允许您在某个时刻保存上下文，然后在绘制后将其恢复为完全“干净”的原始状态

http://jsfiddle.net/gamealchemist/CLYNA/7/

function showMask(maskCoord) {
    if (!imageLoaded) return;
    var originPoint = {
        x: (gridWidth * maskCoord.x),
        y: (gridHeight * maskCoord.y)
    }
    ctx.save();
    ctx.beginPath();
    ctx.rect(originPoint.x, originPoint.y, gridWidth, gridHeight);
    ctx.closePath();
    ctx.clip();
    /// draw the image to be clipped
    ctx.drawImage(img, 0, 0);
    ctx.restore();
}

如何在画布中添加多个形状蒙版

1 个答案: