我可以在HTML canvas javascript中使用PHP換行嗎

Question

我正在尋找一種簡單的解決方案，以便能夠在畫布的固定矩形內自動換行。

我以為這可能行得通，但是除非我將環繞點的長度設置為比文本長，否則它會使畫布完全空白。

<canvas id="planner1" width="300" height="300" style="z-index:0;position:absolute;left:10px;top:10px;border:1px solid #000000;background-color:white;"></canvas>

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

ctx.font = "16px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "left";
ctx.fillText("<?php echo wordwrap("Sample Text", 10, "\n", FALSE);?>",80 ,80);

通過PHP手冊，我看不到有什么可以阻止這種情況的，但是我知道混合使用PHP和javascript充滿了危險。

我從數據庫中獲取了畫布中使用的數據，並將其回顯以繪制矩形。 然后，我想回顯文本（通過javascript輕松實現）並將其自動換行（在javascript中不太容易實現）。 PHP有一種簡單的方法可以做到這一點，我嘗試過，但是在javascript中它沒有自動換行。 這不是服務器端還是客戶端的問題，並且一切正常。...這是格式問題，主要與javascript如何處理canvas標簽范圍內的文本顯示有關。

有人嘗試過這種方法和/或找到了更好的方法嗎？

Answer 1

我已經找到解決問題的辦法。 Difster通過一個示例鏈接使我走上了正確的道路……我一直在尋找CSS稱為“斷字”的javascript功能。

因此，我需要在Difster的示例鏈接中進行其他檢查，如果太長而無法容納在矩形中，則自動換行以實際斷開該單詞。 所以現在我需要從測量字長切換到測量文本。 W3Schools讓我開始測量文本。 然后我嘗試建立一個while循環。 我為此感到掙扎，然后在代碼筆上找到了一個示例...

codepen.io/peterhry/pen/AGIEa

這包括自動換行和斷字。...在將鞋子從difster整理到前面的示例中並進行了一些調整之后，這是jsfiddle可以滿足我的需求。

 function wrapText (context, text, x, y, maxWidth, lineHeight) { var words = text.split(' '); var line = ''; var lineCount = 0; var test; var metrics; for (var i = 0; i < words.length; i++) { test = words[i]; // add test for length of text metrics = context.measureText(test); while (metrics.width > maxWidth) { test = test.substring(0, test.length - 1); metrics = context.measureText(test); } if (words[i] != test) { words.splice(i + 1, 0, words[i].substr(test.length)) words[i] = test; } test = line + words[i] + ' '; metrics = context.measureText(test); if (metrics.width > maxWidth && i > 0) { context.fillText(line, x, y); line = words[i] + ' '; y += lineHeight; lineCount++; } else { line = test; } } context.fillText(line, x, y); } var c1 = document.getElementById("planner1"); var ctx = c1.getContext("2d"); ctx.font = "16px Arial"; ctx.fillStyle = "red"; ctx.textAlign = "left"; text = 'This is a bunch of really looooooong text'; wrapText (ctx, text, 10, 20, 50, 20); 

 <canvas id="planner1" width="300" height="300" style="z-index:0;position:absolute;left:10px;top:10px;border:1px solid #000000;background-color:white;"></canvas> 

感謝大家的投入！！！

Answer 2

我認為您可以使用php部分中的分隔符

<canvas id="planner1" width="300" height="300" style="z-index:0;position:absolute;left:10px;top:10px;border:1px solid #000000;background-color:white;"></canvas>

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

ctx.font = "16px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "left";
ctx.fillText("<?php echo wordwrap("Sample Text", 10, "<br />\n", FALSE);?>",80 ,80);