HTML画布中的蒙版图像

Question

Im trying to change a mask to an image in a html5 canvas when the mouse enters the canvas. When the mouse enters the canvas i draw a shape thats gonna act as a mask. It draws as i want but it wont mask the image.

The function that draws the mask is drawLine(); What is wrong here?

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

Is this what you are looking for? JSFIDDLE Updated so image loads at the start. I believe your main problem was caused by not clearing the canvas. Thus your clip would not show

Updated JSFIDDLE to match your code. Remove that logic from your load event. It should only happen on your drawevent. You are also not clearling or clipping your image in the draw event.

    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;
}