使用 javascript 绘制带有背景图像的画布文本答案

【问题标题】：Draw canvas text with background image using javascript使用 javascript 绘制带有背景图像的画布文本
【发布时间】：2021-02-14 20:40:16
【问题描述】：

我需要在绘制画布时实现这一点：

首先我用画布绘制一个图像作为背景
然后用另一个图像的颜色绘制一个文本

=> 问题是 bg-image 已被 text-img 重叠

这是我的代码：

window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img1 = document.getElementById("bg-img");    
    var img2 = document.getElementById("text-img");

    // draw the first image as background
    ctx.drawImage(img1, 0, 0);

    // put text on canvas
    ctx.save();
    ctx.beginPath();   
    ctx.font = "50pt Verdana";
    ctx.fillText("XBOX", 10, 100);
    ctx.fill();
    // use compositing to draw the background image
    // only where the text has been drawn
    ctx.beginPath();
    ctx.globalCompositeOperation = "source-atop";
    ctx.drawImage(img2, 0, 0, img2.width, img2.height, 0, 0, canvas.width, canvas.height);
    ctx.restore();
    
};

<p>Image to use:</p>

<img id="bg-img" src="http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg" alt="">
<img id="text-img" src="http://www.html5canvastutorials.com/demos/assets/yoda.jpg" alt="">

<p>Canvas:</p>

<canvas id="myCanvas" width="220" height="297"
style="border:1px solid #d3d3d3;">
</canvas>

测试链接： http://jsfiddle.net/1x5dfgty/14/

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

在“destination-over”模式下使用globalCompositeOperation 可以在画布上绘制背景：

function onReady() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img1 = document.getElementById("bg-img");
    var img2 = document.getElementById("text-img");
    // draw the first image as background
    // uncomment this to see the problem
    ctx.save();
    ctx.beginPath();
    // put text on canvas
    ctx.font = "50pt Verdana";
    ctx.fillText("XBOX", 10, 100);
    ctx.fill();
    // use compositing to draw the background image
    // only where the text has been drawn
    ctx.closePath();
    ctx.globalCompositeOperation = "source-atop";
    ctx.drawImage(img2, 0, 0, img2.width, img2.height, 0, 0, canvas.width, canvas.height);
    ctx.restore();
    ctx.globalCompositeOperation = 'destination-over';
    ctx.drawImage(img1, 0, 0);
    //ctx.drawImage(img1, 0, 0, img1.width, img1.height, 0, 0, canvas.width, canvas.height); // Stretch to fit image
}
window.addEventListener("load", onReady);

<p>Image to use:</p>

<img id="bg-img" src="http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg" alt="">
<img id="text-img" src="http://www.html5canvastutorials.com/demos/assets/yoda.jpg" alt="">

<p>Canvas:</p>

<canvas id="myCanvas" width="220" height="297"
style="border:1px solid #d3d3d3;">
</canvas>

【讨论】：