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

作者：小蓝xlanll | 2024-03-16 14:23:28

踩

在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>

效果图：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/250030