小程序
小游戏
企业微信
微信支付
扫描小程序码分享
需求：在一张底背景图上加一些文字
现状：先调用drawImage绘制一张图，然后调用fillText，绘制的文字，总是在最底下，被底背景图盖住
6 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
这个原因是因为，你加载图片的同时 执行下面的代码（绘制文字）了，将绘制文字的代码 放到加载图片之后就可以了。
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
在img.onload中先绘制图片，再写文字，例：
img.onload = function () { ctx.drawImage(img, 0, 0, 200, 200); ctx.font = "30px Arial"; ctx.fillStyle = "black"; ctx.fillText("Hello, canvas!", 100, 200); };
层级问题，无解
用ctx.save()和ctx.restore()来分隔你绘制的上下文，绘制文字相关的样式设置和配置都夹在这两者之间，并保证这部分放在你drawImage之后，这里考虑到有可能用了downloadFile下载图片，把绘制文字的部分也放到downloadFile的回调里面。因为downloadFile是个异步过程。
closePath() 了解一下
ctx.drawImage(image, x, y, width, height); ctx.fillStyle = fillStyle; ctx.font = font; ctx.fillText(text, x, y);
ctx.save();
ctx.fillStyle = fillStyle;
ctx.font = font;
ctx.fillText(text, x, y);
ctx.restore();
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
这个原因是因为，你加载图片的同时 执行下面的代码（绘制文字）了，将绘制文字的代码 放到加载图片之后就可以了。
在img.onload中先绘制图片，再写文字，例：
img.onload = function () { ctx.drawImage(img, 0, 0, 200, 200); ctx.font = "30px Arial"; ctx.fillStyle = "black"; ctx.fillText("Hello, canvas!", 100, 200); };层级问题，无解
用ctx.save()和ctx.restore()来分隔你绘制的上下文，绘制文字相关的样式设置和配置都夹在这两者之间，并保证这部分放在你drawImage之后，这里考虑到有可能用了downloadFile下载图片，把绘制文字的部分也放到downloadFile的回调里面。因为downloadFile是个异步过程。
closePath() 了解一下
ctx.save();ctx.fillStyle = fillStyle;ctx.font = font;ctx.fillText(text, x, y);ctx.restore();