在矩形内写入文本答案

【问题标题】：Write text inside rectangle在矩形内写入文本
【发布时间】：2015-05-12 09:56:55
【问题描述】：

我正在尝试找到如何在矩形内填充文本。不幸的是，我只能找到 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

【问题讨论】：

标签： html rectangles

【解决方案1】：

我知道这是一个很老的问题。但是我遇到了类似的情况，所以我决定发布答案。

注意：您必须区别对待canvas 和html 标签，如div。你会得到一个ctx for canvas，然后像流一样在上面画画。只需更改下一个元素的位置，它就会按预期进行。

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.beginPath();


context.rect(188, 50, 200, 100);
context.fillStyle = 'red';
context.shadowColor = '#999';
context.shadowBlur = 20;
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.fill();
context.fillStyle = 'black';
context.font = '20px Courier';
context.shadowColor = 'transparent';
context.shadowBlur = 0;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.fillText(`List item`, 200, 80);

context.lineWidth = 7;

&lt;canvas id="myCanvas" width="578" height="200"&gt;&lt;/canvas&gt;

【讨论】：