求大神,帮解决一个小问题。100 块小费答谢!

2018-03-20 16:09:44 +08:00
 lieqishi
<html>
<meta charset="UTF-8">
<body>
<canvas id="myCanvas" width="400" height="200" />
</body>
<script>
CanvasRenderingContext2D.prototype.wrapText = function (text, x, y, maxWidth, lineHeight) {

var lines = text.split("\n");

for (var i = 0; i < lines.length; i++) {

var words = lines[i].split(' ');
var line = '';

for (var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = this.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
this.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
} else {
line = testLine;
}
}

this.fillText(line, x, y);
y += lineHeight;
}
};



var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");

// Background.
ctx.fillStyle = "black";
ctx.fillRect(0, 0, 400, 200);

// Line at 180px width to see demonstrate maximum line length. (20x + 160 width)
ctx.strokeStyle = "red";
ctx.moveTo (180.5,0);
ctx.lineTo (180.5,200);
ctx.stroke();

// Multi-line text.
ctx.fillStyle = "white";
ctx.font = "12px sans-serif";
ctx.textBaseline = "top";
ctx.wrapText("Hello World!\n\n \xa0\xa0 三地放松对分散对方三地放松对分散对方 sfsdfsdf 斯蒂芬三地放松对分散对方三地放松对分散对方 sfsdfsdf 斯蒂芬斯蒂芬尔特瑞特人特 sd 三地放斯蒂芬尔特瑞特人特 sd 三地放 \n\n 在尹陌灵花痴般地看着黑袍人的同时,黑袍人也正打量着她。而跟冷然的外表不同的是,他此时心里就跟十五个吊桶打水,七上八下,极其复杂。",20,20,160,16);


</script>
</html>


请帮忙把内容改为可以换段,或者换行。
如您可以解决,请告知。我会给您我的 QQ。谢谢
1484 次点击
所在节点    问与答
1 条回复
lieqishi
2018-03-20 16:23:44 +08:00
已经有人解决了。谢谢~

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/439760

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX