如何将两层Canvas相互叠加

Question

我正在制作一个画布，其中有一个大图像，背后有另一个图像。然后通过使用鼠标坐标我在光标周围做了一个圆圈。这个圆圈将作为一个洞来揭示背景下隐藏的图像。我做得有点但我无法设置正面图像。 请查看我的代码：JSFiddle

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 0;
var y = 0;
var width = 578;
var height = 400;

var imageObj = new Image();
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

function writeMessage(canvas, message, x, y) {
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);

    var pattern = context.createPattern(imageObj, 'no-repeat');
    context.fillStyle = pattern;
    context.fill();

    context.font = '28pt Calibri';
    context.fillStyle = 'black';
    //context.fillText(message, x, y);
    context.beginPath();
    context.arc(x, y, 50, 0, 2 * Math.PI);
    context.stroke();
}

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

canvas.addEventListener('mousemove', function (evt) {
    var mousePos = getMousePos(canvas, evt);
    //var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
    writeMessage(canvas, message, mousePos.x, mousePos.y);
}, false);

context.fillStyle = 'black';
context.fill();

有人能告诉我，请问如何制作像画布一样大的图像来覆盖它？ 感谢

Answer 1

看起来你走在正确的轨道上。设置圆圈不在您的设置中的图像的最简单方法是在canvas元素上设置background图像，并使用background-size: cover使其填充画布区域。

工作示例（请参阅第二个块中的CSS）：

＆＃13;

＆＃13;

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 0;
var y = 0;
var width = 578;
var height = 400;
var imageObj = new Image();

imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

function writeMessage(canvas, message, x, y) {
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    
    var pattern = context.createPattern(imageObj, 'no-repeat');
    context.fillStyle = pattern;
    context.fill();    
    
    context.font = '28pt Calibri';
    context.fillStyle = 'black';
    //context.fillText(message, x, y);
    context.beginPath();
    context.arc(x, y, 50, 0, 2 * Math.PI);
    context.stroke();

}

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

canvas.addEventListener('mousemove', function (evt) {
    var mousePos = getMousePos(canvas, evt);
    var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
    writeMessage(canvas, message, mousePos.x, mousePos.y);

}, false);

＆＃13;

canvas, img {
    display:block;
    margin:1em auto;
    border:1px solid black;
}
canvas {
    background:url('http://img2.wikia.nocookie.net/__cb20090917002539/starwars/images/7/70/Vader_yelloweyes.jpg');
    background-size: cover;
}

＆＃13;

<canvas id="myCanvas" width="578" height="400"></canvas>
<p></p>

＆＃13;

＆＃13;

＆＃13;

要使前景图像填充画布并处理边缘，您需要在另一个画布中调整图像大小。

工作示例：

＆＃13;

＆＃13;

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 0;
var y = 0;
var width = 578;
var height = 400;
var imageObj = new Image();

//Create another canvas to darw a resized image to.
var imageResized = document.createElement('canvas');
imageResized.width = width;
imageResized.height = height;
//Wait for the original image to low to draw the resize.
imageObj.onload = function() {
    //Find hoe mauch to scale the image up to cover.
    var scaleX = width / imageObj.width;
    var scaleY = height / imageObj.height;
    var scaleMax = Math.max(scaleX, scaleY);
    var ctx = imageResized.getContext('2d');
    ctx.scale(scaleMax, scaleMax);
    ctx.drawImage(imageObj, 0, 0);
};

imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';


function writeMessage(canvas, message, x, y) {
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    
    var pattern = context.createPattern(imageResized, 'no-repeat');//Use imageResized, not imageObj.
    context.fillStyle = pattern;
    context.fill();    
    
    context.font = '28pt Calibri';
    context.fillStyle = 'black';
    //context.fillText(message, x, y);
    context.beginPath();
    context.arc(x, y, 50, 0, 2 * Math.PI);
    context.stroke();

}

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

canvas.addEventListener('mousemove', function (evt) {
    var mousePos = getMousePos(canvas, evt);
    var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
    writeMessage(canvas, message, mousePos.x, mousePos.y);

}, false);

＆＃13;

canvas, img {
    display:block;
    margin:1em auto;
    border:1px solid black;
}
canvas {
    background:url('http://img2.wikia.nocookie.net/__cb20090917002539/starwars/images/7/70/Vader_yelloweyes.jpg');
    background-size: cover;
}

＆＃13;

<canvas id="myCanvas" width="578" height="400"></canvas>
<p></p>

＆＃13;

＆＃13;

＆＃13;