Question

我有一个循环变量的问题，我目前的技术诀窍我无法实现我得到的任何搜索结果。问题在于ctx.arc(Autom1.posX,Autom1.posY,5,0,2*Math.PI);我希望通过所有＆＃34; Autom＆＃34; - 变量。我已经尝试了Autom+i以及我能想到的所有变体，我也尝试使用数组来遍历它们。

我正在努力实现的目标是在地图上为每个实体获取一个点。那我该怎么循环呢？有更优雅的方式吗？

<script>
window.onload = function() {
var c = document.getElementById("myCanvas");

var pMeters = ['Autom1', 'Autom2', 'Autom3'];

var Autom1 = {type:"Automaatti", posX:590, posY:505, Visits: 1, Hits: 1, Value: 0.5};
var Autom2 = {type:"Automaatti", posX:580, posY:515, Visits: 1, Hits: 1, Value: 0.0};
var Autom3 = {type:"Automaatti", posX:570, posY:525, Visits: 1, Hits: 1, Value: 0.0};

var odds = Autom1.Hits/Autom1.Visits*100; //Remember to loop these too!!
odds = odds.toFixed(1)+"%";

var ctx = c.getContext("2d");
var img = document.getElementById("map"); 
ctx.drawImage(img, 10, 10);

for (i = 0; i < pMeters.length; i++) {

    ctx.beginPath();                    
    ctx.arc(Autom1.posX,Autom1.posY,5,0,2*Math.PI); // Ask online
    ctx.fillStyle = 'rgba(0,100,200,0.4)';
    ctx.fill();

    ctx.stroke();
    ctx.font = "9px Arial";
    ctx.fillStyle = 'black';
    ctx.fillText(odds,Autom1.posX+10,Autom1.posY-10);
 }
}
</script>

Answer 1

将数据保存在数组pMeters而不是变量中。

<script>
window.onload = function() {
var c = document.getElementById("myCanvas");

    var Autom1 = {type:"Automaatti", posX:590, posY:505, Visits: 1, Hits: 1, Value: 0.5};
    var Autom2 = {type:"Automaatti", posX:580, posY:515, Visits: 1, Hits: 1, Value: 0.0};
    var Autom3 = {type:"Automaatti", posX:570, posY:525, Visits: 1, Hits: 1, Value: 0.0};

var pMeters = [Autom1, Autom2, Autom3]; //Note that there are no Quotes

var odds = Autom1.Hits/Autom1.Visits*100; 
odds = odds.toFixed(1)+"%";

var ctx = c.getContext("2d");
var img = document.getElementById("map"); 
ctx.drawImage(img, 10, 10);

for (i = 0; i < pMeters.length; i++) {

    ctx.beginPath();                    
    ctx.arc(pMeters[i].posX,pMeters[i].posY,5,0,2*Math.PI); // Ask online
    ctx.fillStyle = 'rgba(0,100,200,0.4)';
    ctx.fill();

    ctx.stroke();
    ctx.font = "9px Arial";
    ctx.fillStyle = 'black';
    ctx.fillText(odds,pMeters[i].posX+10,pMeters[i].posY-10);
 }
}
</script>

Answer 2

由于全局变量是窗口对象的属性，你可以使用它：

<script>
window.onload = function() {
    var c = document.getElementById("myCanvas");
    var Autom1 = {type:"Automaatti", posX:590, posY:505, Visits: 1, Hits: 1, Value: 0.5};
    var Autom2 = {type:"Automaatti", posX:580, posY:515, Visits: 1, Hits: 1, Value: 0.0};
    var Autom3 = {type:"Automaatti", posX:570, posY:525, Visits: 1, Hits: 1, Value: 0.0};

    var odds = Autom1.Hits/Autom1.Visits*100; //Remember to loop these too!!
    odds = odds.toFixed(1)+"%";

    var ctx = c.getContext("2d");
    var img = document.getElementById("map"); 
    ctx.drawImage(img, 10, 10);

    for(var i=1; i<=3; i++) {

                ctx.beginPath();                    
                ctx.arc( window["Autom"+i].posX, 
                          window["Autom"+i].posY,
                          5, 
                          0,
                          2*Math.PI);
                ctx.fillStyle = 'rgba(0,100,200,0.4)';
                ctx.fill();

                ctx.stroke();
                ctx.font = "9px Arial";
                ctx.fillStyle = 'black';
                ctx.fillText(odds,Autom1.posX+10,Autom1.posY-10);
             }
            }
    </script>

Answer 3

您可以拥有一个对象数组。像这样：

 <script>
 window.onload = function() {
 var c = document.getElementById("myCanvas");

 var pMeters = [{type:"Automaatti", posX:590, posY:505, Visits: 1, Hits: 1, Value: 0.5}, {type:"Automaatti", posX:590, posY:505, Visits: 1, Hits: 1, Value: 0.5}, {type:"Automaatti", posX:570, posY:525, Visits: 1, Hits: 1, Value: 0.0}];

 var ctx = c.getContext("2d");
 var img = document.getElementById("map"); 
 ctx.drawImage(img, 10, 10);

for (i = 0; i < pMeters.length; i++) {
   var Autom1 = pMeters[i];

   var odds = Autom1.Hits/Autom1.Visits*100; //Remember to loop these too!!
   odds = odds.toFixed(1)+"%";

   ctx.beginPath();                    
   ctx.arc(Autom1.posX,Autom1.posY,5,0,2*Math.PI); // Ask online
   ctx.fillStyle = 'rgba(0,100,200,0.4)';
   ctx.fill();

   ctx.stroke();
   ctx.font = "9px Arial";
   ctx.fillStyle = 'black';
   ctx.fillText(odds,Autom1.posX+10,Autom1.posY-10);
  }
} 
</script>

Javascript，循环遍历特定的对象属性

3 个答案: