[英]How to write text on top of image in HTML5 canvas?
我想在画布上显示一个图像并在该图像上插入一个文本。
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 10, 10);
};
imageObj.src = "darth-vader.jpg";
context.font = "40pt Calibri";
context.fillText("My TEXT!", 20, 20);
};
我在这里只得到一个图像而不是文本; 文字在图片后面。 如何在图片上方插入文字?
那是因为您在加载和绘制图像之前绘制了文本。 绘制图像后,您必须绘制应位于图像顶部的文本。 试试这个代码:
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 10, 10);
context.font = "40pt Calibri";
context.fillText("My TEXT!", 20, 20);
};
imageObj.src = "darth-vader.jpg";
};
例子:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.