javascript图像加载问题

标签 javascript html image canvas yail

好吧,基本上我是个白痴,我不知道我在做什么..我是一个十足的 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/

相关文章:

html - 垂直对齐子 ul 到底部

.net - 将所选行从 DataGridView 复制到另一个,包括图像列

java - 您能否将 Selenium WebElement 转换为字节数组或图像对象(使用 Java)?

css - 如何在div中获取图片?

javascript - 在函数外更改变量值

javascript - 在鼠标悬停事件中引用变量时出现问题

javascript - 获取过去几天的名称(例如 : 7 days ago, 8 天前...)

javascript - 通过单击按钮打开抽屉时禁用文本框

javascript - 几秒钟后 Jquery animation() 响应非常缓慢

html - XHTML 1.0 中的 <dl> 元素是否适合显示资源标签列表或订阅提要?