javascript - 如何让两层 Canvas 一层叠一层

Question

我正在制作一个 Canvas ，其中有一个大图像，在它后面还有另一个图像。然后通过使用鼠标坐标，我在光标周围画了一个圆圈。这个圆圈将作为一个洞来显示背景下隐藏的图像。我做了有点，但我无法设置正面图像。 请看看我的代码: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();

有人能告诉我如何让一张像 Canvas 一样大的图像覆盖它吗？ 谢谢

Answer 1

看来您的方向是正确的。在您的设置中没有圆圈的图像的最简单方法是在 Canvas 元素上设置 background 图像，并使用 background-size: cover 来让它填满 Canvas 区域。

工作示例(参见第二 block 中的 CSS):

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

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

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

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

工作示例:

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

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

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