[英]canvas text is not drawn on an image
我正在使用fabric.js从URL将图像绘制到画布中:
function addImage(url) {
canvas.clear();
fabric.Image.fromURL(url, function(oImg) {
oImg.selectable = false;
canvas.add(oImg);
});
};
作品。 现在,我还想使用此功能在该图像上方绘制文本:
function addText(text_to_add) {
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText(text_to_add,10,50);
};
为了确保文本在图像的顶部绘制,我理解我首先需要绘制图像,然后再绘制文本,如下所示:
<a href="#" onclick="addImage('/path/to/image/image.jpg'); addText('Hello World');">Click me to Draw image and text</a>
结果是,始终在图像后面绘制文本。 我看到文本的时间只有一毫秒,然后图像覆盖了文本。 我希望将文本绘制在图像的顶部。
我已经添加了这个jsfiddle,但是不知何故它无法运行。 fabric.js库可能有问题。 http://jsfiddle.net/02vrr15d/
从onclick
删除addText
,然后添加到addImage
function addImage(url) {
fabric.Image.fromURL(url, function (oImg) {
oImg.selectable = false;
canvas.add(oImg);
addText('Hello World');
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.