请问这段js代码在canvas中为什么显示不出图片
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>
window.onload = function(){
var oC =document.getElementById('c1');
var oImg=document.getElementById('img');
var oGC = oC.getContext('2d');
oImg.onload=function(){
oGC.drawImage(oImg,0,0);
}
};
</script>
</head>
<body>
<canvas id="c1" width="400" height="400"></canvas>
<img id="img" src="alice_picture_1.jpg"/>
</body>
</html> 展开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>
window.onload = function(){
var oC =document.getElementById('c1');
var oImg=document.getElementById('img');
var oGC = oC.getContext('2d');
oImg.onload=function(){
oGC.drawImage(oImg,0,0);
}
};
</script>
</head>
<body>
<canvas id="c1" width="400" height="400"></canvas>
<img id="img" src="alice_picture_1.jpg"/>
</body>
</html> 展开
1个回答
展开全部
你好，当Image对象的src被设置后，图片才开始被加载到网页缓存数据中，全部加载完成以后Image对象触发onload事件回调。如果直接设置完src属性后立即使用drawImage去读取图片数据，那么图片尚未加载完成（此时是读不到的）。因此你需要给image.onload属性设置一个回调函数，在这个函数里绘制canvas。
追问
请问这个回调函数怎么写？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
