HTML画布中的蒙版图像

Question

我试图在鼠标进入画布时将蒙版更改为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;
}

Answer 1

这是你想要的？ JSFIDDLE已更新，因此图像从一开始就加载。 我相信您的主要问题是由于未清除画布引起的。 因此，您的剪辑不会显示

更新了JSFIDDLE以匹配您的代码。 从加载事件中删除该逻辑。 它只能在您的drawevent上发生。 您也不会在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;
}