畫布中的圖像無法正常工作

Question

由於我試圖解決大約一天的問題，因此我需要畫布幫助。這是我正在測試的代碼的一部分。

var imgpos = 0; 

function drawshape(context, shape, fill, bb) { 
context.beginPath(); 
context.save(); 
context.translate(0, 130); 
context.scale(1, 0.65); 
context.shadowOffsetX = 0; 
context.shadowOffsetY = 10; 
context.shadowBlur = 9; 
context.shadowColor = "black"; 
context.arc(shape.x, shape.y, shape.r, shape.sa, shape.ea, shape.cc); 
context.lineWidth = shape.lw; 
// line color 
context.strokeStyle = fill; 
context.stroke(); 
context.restore(); 

    // not working :(--------------- 
context.save(); 
for(var lg = 0; lg < shape.ic; lg++) {    // 
    var imagesel = new Image(); 
    imagesel.src = '/images/themes/default/capsules/'+imgpos+'.png'; 
    imagesel.onload = function(){ 
     if(imgpos==0){xx=70;yy=320;} 
     if(imgpos==1){xx=120;yy=260;} 
     if(imgpos==2){xx=140;yy=320;} 
     if(imgpos==3){xx=160;yy=320;} 
     if(imgpos==4){xx=180;yy=320;} 
     if(imgpos==5){xx=200;yy=320;} 
     if(imgpos==6){xx=220;yy=320;} 
     if(imgpos==7){xx=240;yy=320;} 
     if(imgpos==8){xx=260;yy=320;} 
     context.drawImage(imagesel, xx, yy); 
    } 

    if(imgpos != 8){imgpos++;} else {imgpos=0;} 
}       
context.restore(); 
    // till here :(--------------- 



if(shape.link != 'Limited'){ 
    context.save(); 
    context.scale(1, 0.65); 
    context.translate(500,660); 
    context.font = "bold 15pt Arial"; 
    context.fillStyle = "WHITE"; 
    if(bb <= 2){ 
     context.textAlign="right"; 
     context.rotate((((shape.sa+shape.ea)-0.1)/2)-Math.PI); 
     context.fillText(shape.link, -170, 0); 
    } 
    if(bb > 2){ 
     context.textAlign="left"; 
     context.rotate((((shape.sa+shape.ea)+0.1)/2)-2*Math.PI); 
     context.fillText(shape.link, +170, 0); 
    } 
    context.restore(); 
}else{ 
    context.save(); 
    context.scale(1, 0.65); 
    context.translate(0, 130); 
    context.textAlign="center"; 
    context.font = "bold 15pt Arial"; 
    context.fillStyle = "WHITE"; 
    context.fillText(shape.link, shape.x, shape.y-10); 
    context.restore(); 
} 
} 

所以這個代碼（除不工作的一部分）繪製弧在halfcircle的風格，但他們每個人的分離和陰影等...我的問題是，我想要把照片在所有這些，但不是相同數量的圖片（這就是週期<的原因 - 必須正確，經過測試並使用警報！）。在第一個應該是一張圖片，在第二個，第三個...和最後在第九個二。但如果我嘗試這個代碼，圖片都在一個地方drowe和所有這些正在改變位置，如果此功能運行...我不知道該怎麼辦...

首先，我想將它們添加到路徑（每個路徑都有鏈接，但那是另一個函數，也正常工作），比我嘗試將它與該函數分開，但沒有爲我工作。代碼的重要部分僅僅是工作部分，其他部分完美地工作。

感謝您的幫助。

Answer 1

它看起來像你被臭名昭着的循環變量問題所愚弄。每個函數都有JavaScript變量，而不是每個塊。所以，你的imagesel/imgpos變量實際上只存在一次，這意味着你只有一個位置的圖像。該變量被覆蓋每個循環迭代。

您應該將相應的循環代碼封裝在一個函數中以實際創建單獨的變量。此外，您還沒有在var的任何地方聲明xx/yy。

for(var lg = 0; lg < shape.ic; lg++) { 
    (function(imgpos) { 
     var imagesel = new Image(); 
     imagesel.src = '/images/themes/default/capsules/'+imgpos+'.png'; 
     imagesel.onload = function(){ 
      if(imgpos==0){xx=70;yy=320;} 
      if(imgpos==1){xx=120;yy=260;} 
      if(imgpos==2){xx=140;yy=320;} 
      if(imgpos==3){xx=160;yy=320;} 
      if(imgpos==4){xx=180;yy=320;} 
      if(imgpos==5){xx=200;yy=320;} 
      if(imgpos==6){xx=220;yy=320;} 
      if(imgpos==7){xx=240;yy=320;} 
      if(imgpos==8){xx=260;yy=320;} 
      context.drawImage(imagesel, xx, yy); 
     } 
    })(imgpos); 

    if(imgpos != 8){imgpos++;} else {imgpos=0;} 
}