即时选择图像源

Question

我正在尝试根据对象数组获取不同的图像源。

如果是男性，应该显示men.png。

如果是女性，应该显示female.png。

问题是我在 canvas 中只得到 female.png。

另一个问题是我的回调函数没有按照循环变量的顺序调用。

这是代码。

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div>
<canvas id ="canvas3" width="1100" height="100" ></canvas>
</div>
<script>


var person = [{name:" Mr.Ram T",gender:"Male"}, {name:" Dr.Shila G", gender:"Female"}, {name: " Dr. J Phil", gender:"Male" } , {name:" Mrs. Sita W",gender:"Female"}, {name:" Mrs. Gita W",gender:"Female"}, {name:" Mrs. Rita W",gender:"Female"}];

        function myCallBack(ilocal)
        {
            return function() 
                {   alert(ilocal);
                    ctx.drawImage(img, 10+ilocal*180, 5, 20, 20);
                };
        }


        for (i=0;i<6;i++)
        {
            var canvas = document.getElementById('canvas3');
            var ctx = canvas.getContext('2d');
            var img = new Image();

            if( person[i].gender == "Male")
            {
                img.src = "men.png";
            }
            else
            {
                img.src = "female.png";
            }
            if ( img.complete ) 
            {
            ctx.drawImage(img, 10+i*180, 5, 20, 20);
            }
            else 
            {
            img.onload = myCallBack(i);
            }

        }

</script>
</body>
</html>

Answer 1

更好的选择是在您的应用程序启动之前预加载您的两个图像...

以下是在尝试绘制之前完全加载两张图像的方法：

将您的图像 url 放入数组中。
遍历 urls 数组并为每个 url 创建一个新的图像对象。
从 urls 数组中设置每个图像对象 src。
将每个图像的 onload 回调设置为通用函数（f.ex：myCallback）
将每个图像对象添加到图像数组。
图像数组中的每个图像都会调用回调函数，因此请计算回调函数被调用的次数。当它被调用的次数与您拥有的图像对象一样多时，您就知道您已经完全加载了所有图像。
所有图像都已完全加载...在您的代码中使用它们！

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var urls=[
  'https://dl.dropboxusercontent.com/u/139992952/multple/sillouette1.png',
  'https://dl.dropboxusercontent.com/u/139992952/multple/sillouetteWoman.png'
];
var images=[];
var loadedCount=urls.length;
for(var i=0;i<urls.length;i++){
  var image=new Image();
  image.onload=myCallback;
  image.src=urls[i];
  images.push(image);
}
function myCallback(){
  // wait until all images have been fully loaded
  if(--loadedCount>0){return;}
  // Now all images have been loaded into images[] array
  // They are in the same order as the urls[] array
  var person = [
    {name:" Mr.Ram T",gender:"Male"}, 
    {name:" Dr.Shila G", gender:"Female"}, 
    {name: " Dr. J Phil", gender:"Male" } , 
    {name:" Mrs. Sita W",gender:"Female"}, 
    {name:" Mrs. Gita W",gender:"Female"}, 
    {name:" Mrs. Rita W",gender:"Female"}
  ];
  var x=0;
  for(var i=0;i<person.length;i++){
    var p=person[i];
    var genderIndex=(p.gender=='Male')?0:1;
    ctx.drawImage(images[genderIndex],x,0);
    ctx.fillText(p.name,x,125);
    x+=images[genderIndex].width;
  }
}

body{ background-color:white; }
#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=600 height=150></canvas>

即时选择图像源

Selecting image source on the fly

html

javascript

canvas

callback

drawimage