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();
}
}

所以这段代码（部分不工作除外）绘制半圆形样式的弧线，但每个都是分开和阴影等...我的问题是我想把图片放在所有这些中而不是相同的数字图片（这就是周期＆lt; - 的原因必须是正确的，测试并使用警报！...）。首先应该是一张图片，在第二张图片中，在第三张图片中，最后是第九张图片。但是，如果我尝试这个代码，图片都在一个地方淹没，如果这个功能运行，所有这些都在改变位置...我不知道该怎么办...

首先，我想将它们添加到路径中（每个路径都有链接，但这是另一个功能，也正常工作），而不是我试图将它与该功能分开但对我没有任何作用。代码的重要部分只是不起作用，其他任何东西都是完美的。

感谢您的帮助。

Answer 1

看起来你被臭名昭着的循环变量问题所迷惑。每个函数都有JavaScript变量，而不是每个块。因此，您的imagesel / imgpos变量实际上只存在一次，这意味着您只在一个位置拥有一个图像。每次循环迭代都会覆盖变量。

您应该在函数中包含适当的循环代码以实际创建单独的变量。此外，您尚未使用xx在任何地方声明yy / var。

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

在画布中绘制图像不能正常工作

1 个答案: