首页html使用canvas实现图文混排的完整代码

html使用canvas实现图文混排的完整代码

时间: 2024-02-24 21:56:37 浏览: 265

以下是一个简单的示例代码，实现了在canvas中绘制文本和图像的图文混排效果： ```html <!DOCTYPE html> <html> <head> <title>Canvas Text and Image</title> </head> <body> <canvas id="myCanvas" width="500" height="500"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 绘制文本 ctx.font = "30px Arial"; ctx.fillText("Hello World!", 50, 50); // 绘制图像 var img = new Image(); img.src = "https://picsum.photos/id/237/200/300"; img.onload = function() { ctx.drawImage(img, 100, 100); } </script> </body> </html> ``` 在上面的代码中，我们使用了canvas的getContext方法获取了一个2D的绘图上下文对象ctx，并分别使用了fillText和drawImage方法在canvas中绘制了文本和图像。其中，fillText方法用于绘制文本，它的参数包括文本内容、位置和样式等；drawImage方法用于绘制图像，它的参数包括图像对象、位置和大小等。需要注意的是，在绘制图像时，我们需要先创建一个Image对象，并设置其src属性为需要绘制的图像的URL。由于JavaScript是异步执行的，因此我们需要在Image对象的onload事件中执行绘制操作，以确保图像已经完全加载并可以正确地显示。

阅读全文