使用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="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>