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

Question

我在绘制画布时需要实现这一点：首先我用画布绘制图像作为背景然后用另一张图像的颜色绘制文本=> 问题是 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/

Answer 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="//www.html5canvastutorials.com/demos/assets/darth-vader.jpg" alt="">

<img id="text-img" src="//www.html5canvastutorials.com/demos/assets/yoda.jpg" alt="">

<p>Canvas:</p>

<canvas id="myCanvas" width="220" height="297"

style="border:1px solid #d3d3d3;">

</canvas>