【JavaScript]用Canvas在图标上添加文本数字

falling_wind

于 2019-03-12 17:34:26 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JavaScript Canvas

本文链接：https://blog.youkuaiyun.com/falling_wind/article/details/88425229

这篇博客介绍如何在JavaScript中利用Canvas API为图标添加右上角的文本数字，常用于显示应用的新消息数量。内容包括可直接执行的代码示例，特别提示了在Chrome浏览器中使用Canvas需要注意的图片加载问题以及如何实现文字居中对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【JavaScript]用Canvas在图标上添加文本数字

菜鸟开始学习网页设计相关。

今日需求：在icon右上角增加数字显示
应用场景：网页用来显示各个app的新消息。如果有新消息，则在icon上显示新消息数量，如果没有，则不显示

可直接执行的代码：

需要在当前目录下准备:phone.png

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="216" height="233" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript"

最低0.47元/天解锁文章

200万优质内容无限畅学