with new imagen how from ctx create javascript canvas drawimage preloading

javascript - new - drawImage() no funciona



javascript draw image on canvas (1)

Estoy leyendo "Hacer juegos sociales isométricos en tiempo real con HTML5, CSS3 y Javascript".

No estoy muy involucrado, y me he encontrado con un problema en el lienzo que me ha dejado perplejo la mayor parte del día.

drawImage () no parece estar dibujando. He investigado el problema y he intentado muchas modificaciones de precarga de la imagen, pero hasta ahora nada está funcionando.

Aquí está mi código:

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

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

¡Cualquier ayuda sería apreciada!


Casi lo tienes ...

Solo tienes que darle tiempo a la imagen para que se cargue antes de dibujarla.

Le das a una imagen el tiempo para cargar con este código:

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

Aquí está el código completo y un 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>