使用JSON结果在画布上绘制多个圆圈

Question

我需要使用从json调用返回的数据在画布上绘制几个点。问题是即使数据包含38个不同的点，也只显示一个圆圈。以下是我目前的情况。

<style>
       canvas, img { display:block;  }
       canvas { background:url(../../Content/Images/mapback.png) } 
</style>

<canvas id="myCanvas" width="1022" height="550" style="margin: 0 auto"></canvas>

<script>
var myData =  GetPlots();
var radius = 5;
    function GetPlots(){
        var result = null;
        $.ajax({async: false,
            url: "/Home/MapPlots",
        dataType: "json",
        success: function(data){
            result = data;
        }});
        return result;
    };

    var mapCanvas = document.getElementById("myCanvas");

    var ctx = mapCanvas.getContext("2d");

   for (var i = 0; i < myData.length; i++) {
                ctx.beginPath();
                ctx.arc(parseInt(myData[i].xCoord), parseInt(myData[i].yCoord), radius, 0, Math.PI * 2);
                ctx.fillStyle = myData[i].typeColor;
                ctx.fill();
    };
</script>

这是我的对象的样子并填充：

我到处都试图让这个工作，我只看到一个圆圈。我出错的任何想法？我一直在谷歌和我发现的一切说这是正确的。

Answer 1

示例对象中的yCoord是664和776，超出了画布高度（550px）的范围。

其他一个对象必须在边界内，这就解释了为什么它是唯一可见的对象。