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以匹配您的代码。从load事件中删除该逻辑。它应该只发生在你的drawevent上。您也不会在绘图事件中清除或剪裁图像。

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

在html画布中屏蔽图像

1 个答案: