canvas - html5绘制图片的问题
本文介绍了canvas - html5绘制图片的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
为什么我把new Image()放在function里面时，图片出不来。
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
</head>
<body onload="init()">
<canvas id="girl"></canvas>
</body>
<script>
var girl = document.getElementById("girl");
var girlWidth = 800;
var girlHeight = 400;
girl.width = girlWidth;
girl.height = girlHeight;
var girlCans = girl.getContext('2d');
function init(){
drawGirl();
}
function drawGirl(){
var girlPic = new Image();
girlPic.src = "img/girl.jpg";
girlCans.drawImage(girlPic,0,0, girlWidth, girlHeight);
}
</script></html>
然而我把girlPic设为全局的就能正常显示
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
</head>
<body onload="init()">
<canvas id="girl"></canvas>
</body>
<script>
var girl = document.getElementById("girl");
var girlWidth = 800;
var girlHeight = 400;
girl.width = girlWidth;
girl.height = girlHeight;
var girlCans = girl.getContext('2d');
var girlPic = new Image();
girlPic.src = "img/girl.jpg";
function init(){
drawGirl();
}
function drawGirl(){
girlCans.drawImage(girlPic,0,0, girlWidth, girlHeight);
}
</script></html>
解决方案
因为在image设置完src后，需要一定的时间进行加载，在src设置完后马上运行drawImage函数的时候，image实际上还什么也没有。
比较合适的写法是image.onload = girlCans.drawImage(girlPic,0,0, girlWidth, girlHeight);
这篇关于canvas - html5绘制图片的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
