Question

好吧基本上我是个白痴，我不知道我在做什么...我是一个完整的javascript noob。我想要的只是创建一个画布，在其中加载添加图像，嘴图像，时钟图像（基于时间）和时钟上的药丸。我在这段代码中使用了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>

非常感谢深入的回答，因为我是这样的菜鸟。

Answer 1

你快到了。您只需要将绘图代码添加到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）位置（我只是复制了你所拥有的位置）。

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

javascript图片加载问题

1 个答案: