Fatal编程技术网

javascript图像加载问题

javascript html image canvas

javascript图像加载问题,javascript,html,image,canvas,yail,Javascript,Html,Image,Canvas,Yail,好的，基本上我是个白痴，我不知道我在做什么。。我是个彻头彻尾的傻瓜。我只想创建一个画布，其中加载一个add图像、mouth图像、一个时钟图像（基于时间）和时钟顶部的一个pill。我在这段代码中使用了YAIL，但我已经尝试了很多方法，我完全不知道我做错了什么。。谁能帮帮我吗。该药丸也应该最终被拖进嘴里，并在数据库中注册。 出于简单性的考虑，我也开始按行编码，但当我试图将其更改为另一个文件时，我知道我的运气，它不起作用的原因是什么 <!DOCTYPE html> <html>

好的，基本上我是个白痴，我不知道我在做什么。。我是个彻头彻尾的傻瓜。我只想创建一个画布，其中加载一个add图像、mouth图像、一个时钟图像（基于时间）和时钟顶部的一个pill。我在这段代码中使用了YAIL，但我已经尝试了很多方法，我完全不知道我做错了什么。。谁能帮帮我吗。该药丸也应该最终被拖进嘴里，并在数据库中注册。 出于简单性的考虑，我也开始按行编码，但当我试图将其更改为另一个文件时，我知道我的运气，它不起作用的原因是什么

<!DOCTYPE html>
<html>
<head>
<style> body{ background:#ddd;}
canvas { background:#fff;
 display: block;
 margin: 10px auto; 
 box-shadow: 0 5px 15px #aaa;}</style>
 <script type="text/javascript" src="yail.1.4.js"></script>
 <script type="text/javascript" src="action.js"></script>
</head>
<body>
<canvas id="mycanvas"></canvas>
<script>
var Canvas = function(canvasEl, width, height){
this.el= canvasEl;
this.el.width = width;
this.el.height = height;
this.ctx = canvasEl.getContext("2d");
}
var canvas = new Canvas(document.querySelector("#mycanvas"), 1100, 650);
drawadd();
function drawadd(){
var add = new Image();

add.onload = function() {
    canvas.ctx.drawImage(this, 500,-215);
};
add.src="add.png";
}


drawmouth();
function drawmouth(){
var mouth = new Image();

mouth.onload = function() {
    canvas.ctx.drawImage(this, 100,300,175,100);
};
mouth.src="mouth.png";
}

var currentdate = new Date();
var datetime = currentdate.getHours();
var loader = new YAIL(done, progress, errors);

if(datetime==1||datetime==13){
loader.add("clock/clock1.png");
loader.add("clock/pill.png");
}
else if(datetime==2||datetime==14){
loader.add("clock/clock2.png");
loader.add("clock/pill.png");
}
else if(datetime==3||datetime==15){
loader.add("clock/clock3.png");
loader.add("clock/pill.png");
}
else if(datetime==4||datetime==16){
loader.add("clock/clock4.png");
loader.add("clock/pill.png");
}
else if(datetime==5||datetime==17){
loader.add("clock/clock5.png");
loader.add("clock/pill.png");
}
else if(datetime==6||datetime==18){
loader.add("clock/clock6.png");
loader.add("clock/pill.png");
}
else if(datetime==7||datetime==19){
loader.add("clock/clock7.png");
loader.add("clock/pill.png");
}
else if(datetime==8||datetime==20){
loader.add("clock/clock8.png");
loader.add("clock/pill.png");
}
else if(datetime==9||datetime==21){
loader.add("clock/clock9.png");
loader.add("clock/pill.png");
}
else if(datetime==10||datetime==22){
loader.add("clock/clock10.png");
loader.add("clock/pill.png");
}
else if(datetime==11||datetime==23){
loader.add("clock/clock11.png");
loader.add("clock/pill.png");
}
else if(datetime==0||datetime==12){
loader.add("clock/clock12.png");
loader.add("clock/pill.png");
}


loader.load();
function done(e) { 
    var imageLst = e.images;
    var urlLst = e.urls;
    }
function progress(e) { var current = e.current;
    var total = e.total;
    var image = e.img;
    var pst = current / total * 100; }

function errors(e) { var url = e.url;
    var originalErrorObject = e.error; }

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


正文{背景：#ddd；}
画布{背景：#fff；
显示：块；
利润率：10px自动；
盒影：0 5px 15px#aaa；}
var Canvas=函数（画布、宽度、高度）{
this.el=画布；
此.el.width=宽度；
该高度=高度；
this.ctx=canvasEl.getContext（“2d”）；
}
var canvas=newcanvas（document.querySelector（“mycanvas”），1100650；
drawadd（）；
函数drawadd（）{
var add=新图像（）；
add.onload=函数（）{
canvas.ctx.drawImage（这个，500，-215）；
};
add.src=“add.png”；
}
drawmouth（）；
函数drawmouth（）{
var mouth=新图像（）；
mouth.onload=函数（）{
canvas.ctx.drawImage（这个，100300175100）；
};
mouth.src=“mouth.png”；
}
var currentdate=新日期（）；
var datetime=currentdate.getHours（）；
var loader=新的YAIL（完成、进度、错误）；
如果（datetime==1 | | datetime==13）{
loader.add（“clock/clock1.png”）；
loader.add（“clock/pill.png”）；
}
else if（datetime==2 | | datetime==14）{
loader.add（“clock/clock2.png”）；
loader.add（“clock/pill.png”）；
}
else if（datetime==3 | | datetime==15）{
loader.add（“clock/clock3.png”）；
loader.add（“clock/pill.png”）；
}
else if（datetime==4 | | datetime==16）{
loader.add（“clock/clock4.png”）；
loader.add（“clock/pill.png”）；
}
else if（datetime==5 | | datetime==17）{
loader.add（“clock/clock5.png”）；
loader.add（“clock/pill.png”）；
}
else if（datetime==6 | | datetime==18）{
loader.add（“clock/clock6.png”）；
loader.add（“clock/pill.png”）；
}
else if（datetime==7 | | datetime==19）{
loader.add（“clock/clock7.png”）；
loader.add（“clock/pill.png”）；
}
else if（datetime==8 | | datetime==20）{
loader.add（“clock/clock8.png”）；
loader.add（“clock/pill.png”）；
}
else if（datetime==9 | | datetime==21）{
loader.add（“clock/clock9.png”）；
loader.add（“clock/pill.png”）；
}
else if（datetime==10 | | datetime==22）{
loader.add（“clock/clock10.png”）；
loader.add（“clock/pill.png”）；
}
else if（datetime==11 | | datetime==23）{
loader.add（“clock/clock11.png”）；
loader.add（“clock/pill.png”）；
}
else if（datetime==0 | | datetime==12）{
loader.add（“clock/clock12.png”）；
loader.add（“clock/pill.png”）；
}
loader.load（）；
函数完成（e）{
var imageLst=e.images；
var urlst=e.url；
}
功能进展（e）{var current=e.current；
var total=e.total；
var图像=例如，img；
var pst=当前/总计*100；}
函数错误（e）{var url=e.url；
var originalErrorObject=e.error；}
如果你能给出一个深入的答案，我将不胜感激，因为我是一个不速之客。

你就快到了。只需将图形代码添加到
done
处理程序：

function done(e) { 
    var imageLst = e.images;

    canvas.ctx.drawImage(imageLst[0], 500, -215);
    canvas.ctx.drawImage(imageLst[1], 500, -215);
}
现在有点不清楚你想要在什么位置绘制结果图像，但是你应该能够相应地调整x（500）和y（-215）的位置（我刚刚复制了你的位置）

第一部分中的其他加载代码似乎有点多余，因为您使用的是加载程序。

前面的代码从来没有重叠过，这是一项从教程开始的工作，或者一个人回答stackoverflow等问题。这正是我一直坚持的一点，因为像我对add.png和mouth.png所做的那样做有时会有问题将药片放在时钟后面等。只是为了澄清，图像将始终按照现在的顺序加载，即时钟，然后将药片放在顶部？还有什么让它可以拖放的指针吗？但是这确实有效。@user2232418是的，使用YAIL和
done
回调可以保证所有图像都按照url数组定义的顺序加载。对于拖放，您还可以查看内置的支持将图像拖到画布上（从桌面文件夹），或者如果您需要浏览器内联拖放。最近有一些关于这个话题的问答。非常感谢的最后一个问题是，在“完成”函数中，如果我想添加一个事件侦听器，我将如何将imageLst[1]作为一个参考来操作？我不确定这是否有意义。@user2232418..hm，不太确定你在这里的意思。您始终可以在函数（f.ex.global scope）之外声明一个变量，然后使用图像设置该变量，并从
done
回调中以某种方式告知图像是由f.ex从该函数内设置事件侦听器加载的。这样，只有在实际加载映像时，才会处理来自其他部分的事件。旗帜也是一种方式。希望这有帮助。例如，我在var currentdate行的上方添加了一行“var pill；”。然后在上次绘制图像下的done函数中，我添加了pill=imageLst[1]；这似乎不起作用，因为我试图画药丸，但它不起作用