在矩形內寫文本

Question

我想找到如何在矩形內填充文本。不幸的是，我只能找到C＃項目/教程。 是否可以在畫布中的HTML5中的矩形內添加文本？ 我希望每個矩形（節點）都有不同的文字，例如1叫做牛和另一隻老虎等等。這可能嗎？我已經嘗試了一切！

var x = 150; 
    var y = 100; 


    var canvas = $('#NodeList').get(0); 
var ctx = canvas.getContext('2d'); 
ctx.font = "30px Arial"; 

canvas.height = 0; 

var rects = [ 

    [20, 20, x, y], 
    [20, 220, x, y], 
    [20, 420, x, y], 
    [20, 620, x, y], 
    [20, 820, x, y], 
    [20, 1020, x, y], 
    [20, 1220, x, y], 
    [20, 1420, x, y], 
    [20, 1620, x, y] 



]; 
for (var i = 0; i < rects.length; i++) { 
    canvas.height = canvas.height + 200; 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    //rectangles opnieuw tekenen 
    for (var j = 0; j < i; j++) { 
     ctx.fillRect(rects[j][0], 
     rects[j][1], 
     rects[j][2], 
     rects[j][3]); 
    } 
    ctx.fillRect(rects[i][0], 
    rects[i][1], 
    rects[i][2], 
    rects[i][3]); 

} 

$('#NodeList').click(function (e) { 
    var x = e.offsetX, 
     y = e.offsetY; 

    for (var i = 0; i < rects.length; i++) { 
     if (x > rects[i][0] && x < rects[i][0] + rects[i][2] && y > rects[i][1] && y < rects[i][1] + rects[i][3]) { 
      alert('Vierkant ' + i + ' clicked'); 
     } 
    } 
}); 



enter code here 

Answer 1

我希望這個鏈接會幫助你....

http://andreinc.net/2012/11/14/painting-and-wrapping-a-text-inside-a-rectangular-area-html5-canvas/