javascript - 使用 globalCompositeOperation 用图像遮盖 Canvas 文本；我如何只屏蔽文本而不屏蔽其笔划？

Question

我想要 Canvas 文本周围有一个白色边框/描边，但我也希望文本有 mask (但不是边框)。这可能吗？

This is what i am currently getting with the mask + stroke.

这是我目前使用的代码:

function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
    var cars = text.split("\n");

    for (var ii = 0; ii < cars.length; ii++) {
        var line = "";
        var words = cars[ii].split(" ");

        for (var n = 0; n < words.length; n++) {
            var testLine = line + words[n] + " ";
            var metrics = ctx.measureText(testLine);
            var testWidth = metrics.width;

            if (testWidth > maxWidth) {
                ctx.fillText(line, x, y);
                line = words[n] + " ";
                y += lineHeight;
            }
            else {
                line = testLine;
            }
        }
        ctx.fillText(line, x, y);
        y += lineHeight;
    }
}

function draw(x) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.beginPath();

    // put text on canvas
    var maxWidth = canvas.width - 100;
    var lineHeight = 100;
    var x = (canvas.width - maxWidth) / 2;
    var y = 100;

    ctx.font = "50px crewniverse_font";
    ctx.strokeStyle = 'white';
    ctx.miterLimit = 2;
    ctx.lineJoin = 'circle';
    ctx.lineWidth = 7;
    ctx.strokeText(inputText.value, x, y);
    ctx.lineWidth = 1;

    wrapText(ctx, inputText.value, x, y, maxWidth, lineHeight); //wrap the text

    // draw the mask
    ctx.beginPath();
    ctx.globalCompositeOperation = "source-in";
    ctx.drawImage(img, y * 4, y * 4, img.width, img.height, 0, 0, canvas.width, canvas.height);
    ctx.restore();
}

function init() {
    canvas.width = canvas.height = 1000;

    submitButton = document.getElementById('submit-button');
    submitButton.addEventListener('click', function() {
        draw();
    });
}

And this is what i am getting if i remove the wrapText() function and add the text just with ctx.fillText(inputText.value, canvas.width / 2, 20, canvas.width); instead.

知道怎么做吗？

Answer 1

完成合成后，只需绘制您的笔触即可。

简化代码:

var img = new Image();
img.onload = draw;
img.src = "https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg"

var ctx = c.getContext('2d');

function draw() {
  // first fill the text
  ctx.font = '60px Impact';
  ctx.fillText('Hello World', 20, 80);
  // then do the compositing
  ctx.globalCompositeOperation = "source-in";
  ctx.drawImage(this, 0, 0);
  // finally go back to normal gCO
  ctx.globalCompositeOperation = "source-over";
  // and stroke the text
  ctx.strokeStyle = 'green';
  ctx.lineWidth = 2;
  ctx.strokeText('Hello World', 20, 80);

}

<canvas id="c"></canvas>