HTML canvas

2015-04-23 01:27:51 202 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

HTML5 Canvas 使用教程 Promise用于简化异步操作，避免回调地狱。通过链式调用.then()可以顺序执行多个异步操作。.catch()用于捕获和处理异步操作中的错误。和可以用于并行处理多个Promise，分别在所有完成或第一个完成时返回结果。和finally()提供了更加灵活的错误处理和收尾操作。通过这些特性，Promise使得异步代码更加可读、易于维护，并且错误处理变得更加集中和清晰。阅读详情

context2d.drawImage...
context2d.fillText...

文字和图片的坐标相同，先画图，后写字。
但是字被图片覆盖住了，请问大家，怎么才能让文字浮于图片上方呢？谢谢。

...全文

HTML5CANVAS画布教程 HTML5CANVAS画布教程视频： https://www.bilibili.com/video/BV1Y4411N7e5?from=search&seid=15324256859970295375 https://www.bilibili.com/video/BV19E411G7Vj?from=search&seid=13003172792544246717 代码 <!DOCTYPE html> <html lang="en"> <head> 阅读详情

姚自新

HTML5 43,737 成员 5,571 内容

+ 关注 + 加入社区

切换为时间正序

姚自新 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

HTML canvas

相关推荐