HTML canvas

姚自新 2015-04-23 01:27:51
context2d.drawImage...
context2d.fillText...

文字和图片的坐标相同,先画图,后写字。
但是字被图片覆盖住了,请问大家,怎么才能让文字浮于图片上方呢?谢谢。
...全文
164 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
姚自新 2015-04-23
  • 打赏
  • 举报
回复
引用 8 楼 slwsss 的回复:
是的
引用 7 楼 yaozxzx 的回复:
嗯,谢谢你。
slwsss 2015-04-23
  • 打赏
  • 举报
回复
是的
引用 7 楼 yaozxzx 的回复:
姚自新 2015-04-23
  • 打赏
  • 举报
回复
引用 6 楼 slwsss 的回复:
var canvas = document.getElementById("xxx"); context2d = canvas.getContext("2d"); var img = new Image(); img.src = "images/terminal.png"; img.onload = function() { context2d.drawImage(img, 10, 10); context2d.font = "16px Lucida Grande"; context2d.fillText("1234567890", 12, 12, 120); }
哦,如果不放在onload里面,可能会先写字,后画图,所以盖住了。 如果放在onload里面,可以保证图片加载完成后,先画图,再写字,所以字在上面。 是这样不?
slwsss 2015-04-23
  • 打赏
  • 举报
回复
var canvas = document.getElementById("xxx"); context2d = canvas.getContext("2d"); var img = new Image(); img.src = "images/terminal.png"; img.onload = function() { context2d.drawImage(img, 10, 10); context2d.font = "16px Lucida Grande"; context2d.fillText("1234567890", 12, 12, 120); }
姚自新 2015-04-23
  • 打赏
  • 举报
回复
引用 4 楼 slwsss 的回复:
给下代码
引用 2 楼 yaozxzx 的回复:
我的需求是在canvas上,先绘制背景图,然后在背景图上写一些文字。
var canvas = document.getElementById("xxx");
context2d = canvas.getContext("2d");

var img = new Image();
img.src = "images/terminal.png";
img.onload = function() {
    context2d.drawImage(img, 10, 10);
}

context2d.font = "16px Lucida Grande";
context2d.fillText("1234567890", 12, 12, 120);
slwsss 2015-04-23
  • 打赏
  • 举报
回复
给下代码
引用 2 楼 yaozxzx 的回复:
姚自新 2015-04-23
  • 打赏
  • 举报
回复
引用 1 楼 slwsss 的回复:
y坐标为0吗
context2d.textBaseline="top";
context2d.fillText




类似于这样,先画的图,后写的字。实际上文字是1234567890,但左边的被图片给盖住了。
textBaseline 是设置文字基线的,和它应该不相干吧。
姚自新 2015-04-23
  • 打赏
  • 举报
回复
是一张很大的图,我想作为背景,然后在图上写一些文字。现在文字被图片给盖住了。
slwsss 2015-04-23
  • 打赏
  • 举报
回复
y坐标为0吗 context2d.textBaseline="top"; context2d.fillText

39,082

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧