HTML5 Canvas ctx.fillText 不支持换行

fillText() 方法会在 Canvas 上绘制填充文本。如果您想换行，可以在新行处拆分文本，然后多次调用 filltext() 函数。这样做会将文本拆分成几行，并分别绘制每行。

您可以尝试运行以下代码片段 −

var c = $('#c')[0].getContext('2d');
c.font = '12px Courier';
alert(c);

var str = 'first line 
second line...';
var a = 30;
var b = 30;
var lineheight = 15;
var lines = str.split('
');

for (var j = 0; j
// 用于画布
<canvas id="c" width="200" height="200"></canvas>

// CSS
canvas {
   background-color: #FFCE9E;
}




相关文章


HTML DOM 输入按钮对象

HTML 画布 shadowBlur 属性

HTML DOM address 对象

HTML 画布 shadowColor 属性

使用 onmouseover 属性更改网页背景颜色

HTML 画布 fillStyle 属性

HTML frame 框架标签

HTML Canvas clearRect() 方法

HTML body 标签

HTML optgroup 标签
 



有用资源

html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/





 打印
下一节:如何在 HTML5 中正确使用 h1? ❯❮ 上一节:在 HTML 中，如何根据覆盖背景区域的亮度更改文本颜色?