HTML5畫布上的多行文本

所以我正在嘗試使用HTML5畫布創建一個Meme生成器。我明白我可以使用下面的畫布上寫：HTML5畫布上的多行文本

ctx.filltext()

但是，我只能在畫布上寫一次。有誰知道我可以多次在畫布上寫字多次或甚至兩次。與Meme生成器一樣，它們在圖像的頂部和底部都有一行文本。如果這是不可能的，任何人都可以讓我知道或指向我的教程/答案的方向，這可以讓我在包含更改字體和字體大小以及頂部/底部，左側/右側的文本的圖像上寫字。

感謝任何人都可以提供幫助。

來源

2016-03-05 Geordie Dave

容易。只需發出多個'fillText'命令：'fillText（'top'，10，topY）; fillText（'bottom'，10，bottomY）。' – markE

是的，我試過，它的工作原理，但是當我去改變第二個字體的大小時，它將它們都改成了相同的大小。我似乎無法使用數組來創建多個filltext（），以便我可以設置每個字體大小。有任何想法嗎？ –

我已經發布了一個答案，展示瞭如何創建繪製樣式文本的可重用函數。 :-) – markE

您可以創建繪製文中給出你想要的造型參數的函數：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
drawText('This is the top',canvas.width/2,20,24,'verdana'); 
 
drawText('This is the bottom',canvas.width/2,canvas.height-20,16,'Courier'); 
 

 
function drawText(text,centerX,centerY,fontsize,fontface){ 
 
    ctx.save(); 
 
    ctx.font=fontsize+'px '+fontface; 
 
    ctx.textAlign='center'; 
 
    ctx.textBaseline='middle'; 
 
    ctx.fillText(text,centerX,centerY); 
 
    ctx.restore(); 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>

來源

2016-03-06 00:06:09 markE

謝謝，它完美的作品。非常感激！ –

好了，現在我有另一個問題。複製到我的文件，但它是在控制檯中報告 - 類型錯誤：畫布爲空。我根本不明白這一點。有任何想法嗎？？ –

該錯誤與'drawText'無關。在執行繪圖命令之前，您是否使用'window.onload'讓DOM完全加載？如果沒有，你必須這樣做。 – markE

HTML5畫布上的多行文本

回答

相關問題