Javascript html画布中的掩码图像

当鼠标进入画布时，我试图将一个掩码更改为html5画布中的图像。 当鼠标进入画布时，我画了一个形状，它将充当一个面具。它可以按我的要求画图，但不能遮住图像

绘制遮罩的函数是

drawLine（）
这里怎么了

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var img = document.createElement('IMG');
var mY;
var mX;

img.onload = function () {
    context.save();
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(160, 600);
    context.rect(0, 0, 160, 600);
    context.closePath();
    context.clip();
    context.drawImage(img, 0, 0);
    context.restore();
};

img.src = "http://placekitten.com/160/600";

canvas.addEventListener('mouseenter', function(evt) {
    var mousePos = getMousePos(canvas, evt);
    var message = mousePos.y + ', ' + mousePos.x; 
    mY = mousePos.y;
    mX = mousePos.x;
   drawLine();
}, false);

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

function drawLine() {

    if(mX > 80) {
        context.restore();
        context.fillStyle = "rgb(000,000,000)";
        context.beginPath();
        context.moveTo(160, mY);
        context.lineTo(0,mY+setCutAngle());
        context.lineTo(0,600);
        context.lineTo(160,600);
        context.fill();
        context.closePath();
    } else {

    }
    context.stroke();
}

function setCutAngle() {
    return Math.floor(Math.random() * 45) + 10;
}

这就是你要找的吗？已更新，以便在开始时加载图像。
我相信你的主要问题是因为没有清理画布。因此，您的剪辑不会显示

更新了JSFIDLE以匹配您的代码。从加载事件中删除该逻辑。它应该只发生在你的抽屉上。在draw事件中也没有清除或剪裁图像

    var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var img = document.createElement('IMG');
var mY;
var mX;

img.onload = function () {
    context.drawImage(img, 0, 0);
};

img.src = "http://placekitten.com/160/600";

canvas.addEventListener('mouseenter', function(evt) {
    var mousePos = getMousePos(canvas, evt);
    var message = mousePos.y + ', ' + mousePos.x; 
    mY = mousePos.y;
    mX = mousePos.x;
    drawLine();
}, false);

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

function drawLine() {
     context.save();
    context.clearRect(0, 0, canvas.width, canvas.height);
    if(mX > 80) {
        context.restore();
        context.fillStyle = "rgb(000,000,000)";
        context.beginPath();
        context.moveTo(160, mY);
        context.lineTo(0,mY+setCutAngle());
        context.lineTo(0,600);
        context.lineTo(160,600);
        context.clip();
        context.drawImage(img, 0, 0);
        context.closePath();
    } else {

    }
    context.stroke()
}

function setCutAngle() {
    return Math.floor(Math.random() * 45) + 10;
}

这个形状会被画出来，但不会遮掩。为什么？为什么？它的工作原理就像当你在鼠标上输入鼠标时，鼠标在Y轴上的第一个位置会画一条线，然后它会从该位置直接画一条线到div的另一侧。该线下的每一条线都应该像一个遮罩。该遮罩应该在每个鼠标上重新绘制。确实如此。问题是，它不充当面具。它只是得到了一个填充颜色。谢谢！但我真的想把它放在mouseenter身上。为什么它不附加掩码？只有一种颜色。我想做的是剪掉的形象。谢谢！几乎。图像从一开始就应该可见。启用鼠标输入时，应从鼠标的当前Y位置剪裁/遮罩图像。从Y位置向下到底部剪裁。这应该在每次鼠标进入时发生。（如果还有需要剪辑/遮罩的内容）更新，以便在开始时可以看到图像。我对我得到的内容进行了修改。应该像这样工作，但黑色矩形应该是一个面具。