首页html5如何将文字添加在图片上

html5如何将文字添加在图片上

时间: 2023-10-07 17:06:02 浏览: 197

可以使用HTML5的canvas标签来将文字添加在图片上。以下是一个简单的示例代码： ``` <!DOCTYPE html> <html> <head> <title>将文字添加在图片上</title> </head> <body> <canvas id="myCanvas"></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 = "30px Arial"; ctx.fillStyle = "red"; ctx.fillText("Hello World!", 10, 50); }; img.src = "example.jpg"; </script> </body> </html> ``` 其中，使用 `ctx.drawImage()` 方法将图片绘制到 canvas 上，然后使用 `ctx.font` 和 `ctx.fillText()` 方法来绘制文字。

阅读全文