好吧,基本上我是个白痴,我不知道我在做什么..我是一个十足的 javascript 菜鸟。我想要的只是创建一个 Canvas ,在其中加载添加图像、嘴巴图像、时钟图像(基于时间)和时钟顶部的药丸。我在这段代码中使用 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>
如果我能提供深入的答案,我们将不胜感激,因为我是个菜鸟。
最佳答案
你就快到了。您只需将绘图代码添加到 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图像加载问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20275200/