drawImage（）不起作用 [英] drawImage() not working
问题描述
我正在阅读使用HTML5，CSS3和Javascript制作等距社交实时游戏。
I am reading through "Making Isometric Social Real-Time Games with HTML5, CSS3 and Javascript."
我不太喜欢它，我遇到了一个帆布问题让我在一天中的大部分时间都难过。
I am not far into it, and I have run into a canvas problem that has ahd me stumped for most of the day.
drawImage（）似乎没有绘图。我已经研究了这个问题，并尝试了许多预加载图像的排列，但到目前为止还没有任何工作。
drawImage() does not seem to be drawing. I have researched the issue and have tried many permutations of pre-loading the image, but so far nothing is working.
这是我的代码：
HTML：
<canvas id="game" width="100" height="100">
Your browser doesn't include support for the canvas element.
</canvas>
CSS：
html {
height:100%;
overflow:hidden
}
body {
margin:0px;
padding:0px;
height:100%;
}
和js：
window.onload = function() {
var canvas = document.getElementById('game');
canvas.width=document.body.clientWidth;
canvas.height=document.body.clientHeight;
var c = canvas.getContext('2d');
function showIntro() {
var phrase = "Click or tap screen to start";
c.clearRect (0, 0, canvas.width, canvas.height);
var grd = c.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(0, "#9db7a0");
grd.addColorStop(1, "#e6e6e6");
c.fillStyle = grd;
c.fillRect (0, 0, canvas.width, canvas.height);
var logoImg = new Image();
logoImg.src = '../img/logo.png';
var originalWidth = logoImg.width;
logoImg.width = Math.round((50 * document.body.clientWidth) / 100);
logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);
var logo = {
img: logoImg,
x: (canvas.width/2) - (logoImg.width/2),
y: (canvas.height/2) - (logoImg.height/2)
}
c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);
c.font = "bold 16px sans-serif";
var mt = c.measureText(phrase);
var xcoord = (canvas.width / 2 ) - (mt.width / 2);
c.fillStyle = '#656565'
c.fillText (phrase, xcoord, 30);
}
showIntro();
}
任何帮助都将不胜感激！
Any help would be appreciated!
推荐答案
你几乎拥有它......
You almost have it...
你只需要给在绘制之前加载图像的时间。
You just have to give the image time to load before drawing it.
使用此代码加载图像时间：
You give an image time to load with this code:
var logoImg = new Image();
logoImg.onload = function() {
// At this point, the image is fully loaded
// So do your thing!
};
logoImg.src = "myPic.png";
这是完整的代码和小提琴： http://jsfiddle.net/m1erickson/GKK39/
Here is complete code and a Fiddle: http://jsfiddle.net/m1erickson/GKK39/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var c=canvas.getContext("2d");
function showIntro() {
var phrase = "Click or tap screen to start";
var logoImg=new Image();
logoImg.onload=function(){
c.clearRect (0, 0, canvas.width, canvas.height);
var grd = c.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(0, "#9db7a0");
grd.addColorStop(1, "#e6e6e6");
c.fillStyle = grd;
c.fillRect (0, 0, canvas.width, canvas.height);
var originalWidth = logoImg.width;
logoImg.width = Math.round((50 * document.body.clientWidth) / 100);
logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);
var logo = {
img: logoImg,
x: (canvas.width/2) - (logoImg.width/2),
y: (canvas.height/2) - (logoImg.height/2)
}
c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);
c.font = "bold 16px sans-serif";
var mt = c.measureText(phrase);
var xcoord = (canvas.width / 2 ) - (mt.width / 2);
c.fillStyle = '#656565'
c.fillText (phrase, xcoord, 30);
}
logoImg.src="http://dl.dropbox.com/u/139992952/car.png";
}
showIntro();
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
这篇关于drawImage（）不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
