Question

我想基于JSON文件中的数据在画布上绘制三角形。我想在矩形的JSON中显示每个对象的name属性。我该怎么做？

到目前为止，这是我的代码：

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>test</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <div class="scrollbar" id="ex3" width="100px" height="100px" overflow="auto">
    <canvas id="NodeList" style="border:2px solid black;" width="200" height="2000"></canvas>

  </div>

  <script>
    var c = document.getElementById("NodeList");
    var ctx = c.getContext("2d");
    ctx.rect(20, 20, 150, 100);
    ctx.rect(20, 220, 150, 100);
    ctx.rect(20, 420, 150, 100);
    ctx.rect(20, 620, 150, 100);
    ctx.rect(20, 820, 150, 100);
    ctx.rect(20, 1020, 150, 100);
    ctx.rect(20, 1220, 150, 100);
    ctx.rect(20, 1420, 150, 100);
    ctx.rect(20, 1620, 150, 100);
    ctx.rect(20, 1820, 150, 100);
    ctx.rect(20, 2020, 150, 100);
    ctx.rect(20, 2220, 150, 100);
    ctx.rect(20, 2420, 150, 100);
    ctx.rect(20, 2620, 150, 100);

    ctx.stroke();
  </script>

</body>

</html>

＆＃13;

我的JSON文件格式为：

[        
    {
        "name": "1",
        "x": 225,
        "y": 197,
        "width": 121,
        "height": 67,
        "bgColor": "#00FF00",
        "radius": 2,
        "version": "1.0.0"
    },

    {
        "name": "2",
        "x": 225,
        "y": 297,
        "width": 121,
        "height": 67,
        "bgColor": "#00FF00",
        "radius": 2
    },

    {
        "name": "3",
        "x": 225,
        "y": 397,
        "width": 121,
        "height": 67,
        "bgColor": "#00FF00",
        "radius": 2
    },

    {
        "name": "4",
        "x": 225,
        "y": 497,
        "width": 121,
        "height": 67,
        "bgColor": "#00FF00",
        "radius": 2
    },

    {
        "name": "5",
        "x": 225,
        "y": 597,
        "width": 121,
        "height": 67,
        "bgColor": "#00FF00",
        "radius": 2
    },

      {
        "name": "6",
        "x": 225,
        "y": 697,
        "width": 121,
        "height": 67,
        "bgColor": "#00FF00",
        "radius": 2
      },

      {
        "name": "7",
        "x": 225,
        "y": 797,
        "width": 121,
        "height": 67,
        "bgColor": "#00FF00",
        "radius": 2
    },

    {
        "name": "8",
        "x": 225,
        "y": 897,
        "width": 121,
        "height": 67,
        "bgColor": "#00FF00",
        "radius": 2
    },

    {
        "name": "9",
        "x": 225,
        "y": 997,
        "width": 121,
        "height": 67,
        "bgColor": "#00FF00",
        "radius": 2
    },

    {
        "name": "10",
        "x": 225,
        "y": 1097,
        "width": 121,
        "height": 67,
        "bgColor": "#00FF00",
        "radius": 2
    }
]

Answer 1

您可以尝试在矩形上覆盖文本。

第一个示例：http://jsfiddle.net/jedywrka/

ctx.rect(20, 20, 150, 100);
ctx.fillText(data[0].name, 25, 35);

将json数据放在canvas html5中

1 个答案: