使用JSON結果在畫布上繪製多個圓圈

我需要使用從json調用返回的數據在畫布上繪製幾個點。問題是即使數據包含38個不同的點，也只顯示一個圓。以下是我目前擁有的。使用JSON結果在畫布上繪製多個圓圈

<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>

這是我的目標看起來並填充：

enter image description here

我已經遍佈試圖得到這個工作的地方，我只看到一個圓圈。任何想法，我錯了？我一直在谷歌和我發現的一切都說這是正確的。

來源

2014-10-20 Skindeep2366

'plotData' vs'myData'？假設這是一個錯字。嘗試在閉包中封入'for'循環 – charlietfl 2014-10-20 03:03:47

@charlietfl我第一次問這個問題時，錯過了輸入。我已糾正它。但它仍然給我1圈。 – Skindeep2366 2014-10-20 03:10:01

您的示例對象中的yCoord是664和776，它們超出了畫布高度（550px）的範圍。

其他對象之一必須在邊界內，這就解釋了爲什麼它是唯一可見的對象。

來源

2014-10-20 03:25:05

好趕上..非常感謝。 – Skindeep2366 2014-10-20 03:29:09

使用JSON結果在畫布上繪製多個圓圈

回答

相關問題