Javascript 在画布中设置图像循环动画

我尝试在canvas元素中为带有图像的循环编写脚本。我想做的是：

我想从json文件加载所有图像数据，如ajax请求中的url标题和名称优先（我可能应该使用

window.onload

）

当加载图像数据时，我想显示正在加载的gif图像，然后我想在canvas元素中显示加载的json文件中的第一个图像

这是主要问题，当我点击名为“点击匹配”的按钮时，我想运行函数，每个函数都将在画布元素中绘制随机图像，并带有动画-简单动画（我指的是类似老虎机的东西）

我有ajax请求，随机数函数，简单的动画类等

逻辑很简单，单击按钮->显示多个图像->停止随机图像->检查所选类型的图像标题->结束（再次单击按钮时再次重复）

我不知道如何在一个脚本中组合我的函数

我的json文件

[
      {
        "url": "http://lorempixel.com/400/200/",
        "filename": "example-1",
        "caption": "car"
      },
      {
        "url": "http://lorempixel.com/400/200/",
        "filename": "example-2",
        "caption": "bike"
      },
      {
        "url": "http://lorempixel.com/400/200/",
        "filename": "example-3",
        "caption": "quad"
      },
      {
        "url": "http://lorempixel.com/400/200/",
        "filename": "example-4",
        "caption": "truck"
      },
      {
        "url": "http://lorempixel.com/400/200/",
        "filename": "example-5",
        "caption": "pickup"
      },
      {
        "url": "http://lorempixel.com/400/200/",
        "filename": "example-6",
        "caption": "pogo"
      }
]

带有JavaScript文件的HTML

[
      {
        "url": "http://lorempixel.com/400/200/",
        "filename": "example-1",
        "caption": "car"
      },
      {
        "url": "http://lorempixel.com/400/200/",
        "filename": "example-2",
        "caption": "bike"
      },
      {
        "url": "http://lorempixel.com/400/200/",
        "filename": "example-3",
        "caption": "quad"
      },
      {
        "url": "http://lorempixel.com/400/200/",
        "filename": "example-4",
        "caption": "truck"
      },
      {
        "url": "http://lorempixel.com/400/200/",
        "filename": "example-5",
        "caption": "pickup"
      },
      {
        "url": "http://lorempixel.com/400/200/",
        "filename": "example-6",
        "caption": "pogo"
      }
]

//ajax请求
函数createXHR（）{
if（XMLHttpRequest的类型！=“未定义”）{
返回新的XMLHttpRequest（）；
}else if（ActiveXObject的类型！=“未定义”）{
if（typeof arguments.callee.activeXString！=“string”）{
var版本=[“MSXML2.XMLHttp.6.0”、“MSXML2.XMLHttp.3.0”、“MSXML2.XMLHttp”]，
i、 len；
对于（i=0，len=versions.length；i=200&&xhr.status<300）| | xhr.status==304）{
警报（xhr.responseText）；
//json文件
//var jsonArr=JSON.parse（xhr.responseText）；
}否则{
警报（“请求未成功：+xhr.status”）；
}
}
};
open（“get”，jsonUrl，true）；
xhr.send（空）；
//当所有图像都将被加载时，如何“在canwas中显示第一个图像”，同时显示加载的图像？
/*
window.onload=函数（）{
setTimeout（函数（）{
//预加载图像
新建图像（）.src=“load.gif”
}, 1000);
};
*/
//在画布中显示第一个图像
window.onload=函数（）{
var canvas=document.getElementById（“myCanvas”）；
var context=canvas.getContext（“2d”）；
var imageObj=新图像（）；
imageObj.onload=函数（）{
var-destX=0；
var-destY=0；
drawImage（this、destX、destY）；
};
//这里应该是json文件中的第一个图像
imageObj.src=”http://lorempixel.com/400/200/";
};
//随机图像显示
函数getRandomInt（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1））+min；
}
var randomNumber=getRandomInt（1,6）；
//控制台日志（随机编号）；
//用于检查具有选定值的图像标题的脚本
函数匹配（）{
var imageCaption=“汽车”；
var e=document.getElementById（“selectList”）；
var selectedObj=e.options[e.selectedIndex].value；
if（selectedObj==“empty”）{
document.getElementById（“结果”）.innerHTML=“首先选择您的车辆”；
}
else if（imageCaption==selectedObj&&selectedObj！=“空”）{
//警报（“找到匹配项”）；
//控制台日志（“找到匹配项”）；
document.getElementById（“结果”）.innerHTML=“找到匹配项”；
}
否则{
//警惕（“这次不是”）；
//console.log（“这次不是”）；
document.getElementById（“结果”）.innerHTML=“这次不是”；
}
console.log（selectedObj）；
}
//
//胺化类
var Animation=函数（canvasID）{
this.canvas=document.getElementById（canvasID）；
this.context=this.canvas.getContext（“2d”）；
这个t=0；
这个时间间隔=0；
this.startTime=0；
this.lastTime=0；
此.frame=0；
这是。动画=假；
window.requestAnimFrame=（函数（回调）{
return window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
})();
};
//getContext方法
Animation.prototype.getContext=函数（）{
返回这个.context；
};
//getCanvas方法
Animation.prototype.getCanvas=函数（）{
返回此.canvas；
};
//清除画布方法
Animation.prototype.clear=函数（）{
this.context.clearRect（0，0，this.canvas.width，this.canvas.height）；
};
//动画帧的生成方法
Animation.prototype.setDrawStage=函数（）{
this.drawStage=func；
};
Animation.prototype.isAnimating=函数（）{
返回此项。设置动画；
};
//函数get frame-帧数
Animation.prototype.getFrame=函数（）{
返回此.frame；
};
//启动动画方法
Animation.prototype.start=函数（）{
这是。动画=真；
变量日期=新日期（）；
this.startTime=date.getTime（）；
this.lastTime=this.startTime；
if（this.drawStage！==未定义）{
这个.drawStage（）；
}
这个.animationLoop（）；
};
//停止方法-停止动画
Animation.prototype.stop=函数（）{
这是。动画=假；
};
//时间间隔方法-返回上一个动画帧和当前动画帧之间的时间（以毫秒为单位）
Animation.prototype.getTimeInterval=函数（）{
返回此.timeInterval；
};
//获取时间-以毫秒为单位返回动画时间
Animation.prototype.getTime=函数（）{
归还这个.t；
};
//获取fps方法-返回当前动画fps值
Animation.prototype.getFps=函数（）{
返回this.timeInterval>0？1000/this.timeInterval:0；
};
//animationLoop方法-主动画循环
Animation.prototype.animationLoop=函数（）{
var=这个；
这个.frame++；
变量日期=新日期（）；
var thisttime=date.getTime（）；
this.timeInterval=ThistTime-this.lastTime；
this.t+=this.timeInterval；
this.lastTime=这次；
if（this.drawStage！==未定义）{
这个.drawStage（）；
}
如果（这是动画）{
requestAnimFrame（函数（）{
那就是。animationLoop（）；
});
}
};
////动画类结束

选择车辆
汽车
自行车
方庭
卡车
改善
波戈