drawImage() ne fonctionne pas

Je suis de la lecture par le biais de "Faire Isométrique Sociaux en Temps Réel à des Jeux avec HTML5, CSS3 et Javascript."

Je ne suis pas loin, et j'ai couru dans une toile problème qui a ahd moi perplexe pour la plupart de la journée.

drawImage() ne semble pas être de dessin. J'ai fait des recherches sur la question et ont essayé un grand nombre de permutations de pré-chargement de l'image, mais jusqu'à présent, rien ne fonctionne.

Voici mon code:

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%;
}

et 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();
}

Toute aide serait appréciée!

InformationsquelleAutor Jeremythuff | 2013-02-24
  1. 39

    Vous êtes presque sur de l'avoir...

    Vous avez juste à donner l'image de temps à charger avant le dessin.

    Vous donner une image de temps à charger avec ce code:

    var logoImg = new Image();
logoImg.onload = function() {
//At this point, the image is fully loaded
//So do your thing!
};
logoImg.src = "myPic.png";

    Ici est le code complet et un Violon: 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>
    • Qu'il a fait. Thnx une tonne!
    InformationsquelleAutor markE