html canvas怎么在图片上面加文字

最新推荐文章于 2024-04-23 12:07:19 发布

青茶360

最新推荐文章于 2024-04-23 12:07:19 发布

阅读量976

点赞数 8

分类专栏： HTML 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/NCZB007/article/details/136654132

版权

HTML 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

在HTML canvas中，要让文字显示在图片上方，你需要按照以下步骤操作：

首先，使用drawImage()方法将图片绘制到canvas上。
然后，使用fillText()或strokeText()方法在canvas上绘制文本。

以下是一个简单的示例代码：

<!DOCTYPE html>
<html>
<body>
 
<canvas id="myCanvas" width="300" height="200"></canvas>
 
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
 
var img = new Image();
img.onload = function() {
    // 当图片加载完成后
    ctx.drawImage(img, 0, 0); // 绘制图片
    ctx.font = '20px Arial'; // 设置字体大小和类型
    ctx.fillStyle = 'white'; // 设置填充颜色
    ctx.fillText('Hello World', 50, 50); // 在指定位置填充文本
};
img.src = 'path_to_your_image.jpg'; // 替换为你的图片路径
</script>
 
</body>
</html>

效果图：