首页html 画布写字换行

html 画布写字换行

时间: 2023-11-04 16:00:44 浏览: 82

在 HTML 画布上写字并换行可以使用 `fillText()` 方法和 `textAlign` 属性来实现。下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>Canvas写字换行</title> </head> <body> <canvas id="myCanvas" width="400" height="200"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var text = "这是一段需要换行的文字，换行后应该显示在下一行。"; var x = 20; // 文字起始位置的x坐标 var y = 50; // 文字起始位置的y坐标 var maxWidth = 200; // 文字的最大宽度 var lineHeight = 30; // 行高 ctx.font = "16px Arial"; // 设置字体样式和大小 ctx.fillStyle = "black"; // 设置字体颜色 ctx.textAlign = "left"; // 设置文本的对齐方式（左对齐） function wrapText(text, x, y, maxWidth, lineHeight) { var words = text.split(" "); // 将文字拆分为单词数组 var line = ""; // 当前行的文字 for (var i = 0; i < words.length; i++) { var testLine = line + words[i] + " "; var metrics = ctx.measureText(testLine); var testWidth = metrics.width; if (testWidth > maxWidth && i > 0) { ctx.fillText(line, x, y); // 绘制当前行的文字 line = words[i] + " "; y += lineHeight; } else { line = testLine; } } ctx.fillText(line, x, y); // 绘制最后一行的文字 } wrapText(text, x, y, maxWidth, lineHeight); </script> </body> </html> ``` 这段代码会在一个宽为400px，高为200px的画布上绘制一段文字，并自动换行显示。可以根据需要调整起始位置、文字样式、行高等参数。

阅读全文