Javascript Girl
  1. Javascript Girl
  3. L'image de toile HTML5 n'est pas visible en chrome
Intereting Posts
DataTables: Uncaught TypeError: Impossible de lire les "valeurs par défaut" de la propriété de undefined Comment exécuter FetchXML dans CRM 2011 en utilisant un service Web CRM 2011 et JavaScript? Internet Explorer 7 iframe, taille 100% HTML – comment afficher les données locales dans img tag? Sélecteur jQuery pour saisir des cellules dans la même colonne Requiert () un fichier CoffeeScript à partir d'un fichier JavaScript ou REPL Est-il possible d'obtenir les noms de propriété hérités non énumérés d'un objet? Chargement d'un fichier texte via AJAX donne une erreur URI restreinte Comment puis-je supprimer un noeud enfant en HTML en utilisant JavaScript? Passer une variable à jquery en utilisant l'Odomètre Faire pivoter une image autour de son centre en toile Écrire un code propre avec des promesses imbriquées Emscripten avec chargeurs de module Javascript Date.toJSON ne reçoit pas le décalage horaire Événement de redimensionnement des fenêtres pour la vue arrière

L'image de toile HTML5 n'est pas visible en chrome

J'utilise la toile HTML5 et je mets deux images là-bas, mais je suis confronté à un problème qui est, une image est chargée et visible en chrome, mais une autre image n'est visible que dans mozilla mais après le rafraîchissement. Je ne sais pas pourquoi cela se produit alors que je suis nouveau dans une toile. 

var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var x = 0; var y = 0; var width = 900; var height = 700; var imageObj = new Image(); imageObj.onload = function() { context.drawImage(imageObj, x, y, width, height); }; imageObj.src = 'http://img13.deviantart.net/1550/i/2011/353/4/2/mobile_game_background_by_disnie-d4jmr8r.jpg'; var startImageObj = new Image(); startImageObj.onload = function() { context.drawImage(startImageObj, (canvas.width-startImageObj.width)/2, (canvas.height-startImageObj.height)/2) }; startImageObj.src = 'http://assets.halfbrick.com/yc/v3/images/button-play.png'; 
 <canvas id="canvas" width="900" height="700"></canvas>

violon

Comme onload événement onload est asynchrone, assurez-vous que le play-button est configuré dans le onload-handler de l' base-image 

 var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var x = 0; var y = 0; var width = 900; var height = 700; var imageObj = new Image(); imageObj.onload = function() { context.drawImage(imageObj, x, y, width, height); var startImageObj = new Image(); startImageObj.onload = function() { context.drawImage(startImageObj, (canvas.width - startImageObj.width) / 2, (canvas.height - startImageObj.height) / 2) }; startImageObj.src = 'https://d30y9cdsu7xlg0.cloudfront.net/png/5670-200.png'; }; imageObj.src = 'http://img13.deviantart.net/1550/i/2011/353/4/2/mobile_game_background_by_disnie-d4jmr8r.jpg'; 
 <canvas id="canvas" width="900" height="700"></canvas>

@ La réponse de Rayon est juste en ce que, avec votre mise en œuvre actuelle, vous ne pouvez pas savoir quelle image aura chargée en premier, mais IMO est faux d'envelopper tout dans le même rappel, car vous devrez attendre que la première image ait été chargée avant le déclenchement Le chargement de la prochaine, qui produira une apparition scintillante de la dernière image.

Au lieu de cela, créez une fonction de préchargeur qui déclenchera une fonction de dessin lorsque les deux images ont été chargées.

Cela a l'avantage de faciliter l'appel de votre fonction de dessin plus tard, et aussi de garder votre code un peu plus propre: 

 /* preloader inputs : an array containing the urls of the images to load, a callback function called when all the images have loaded outputs: an array containing all the image elements in the same order has the urls where provided */ function preloader(imageURLs, callback) { var toLoad = imageURLs.length, toReturn = [], decrement = function() { if (--toLoad <= 0) { callback(); } }; imageURLs.forEach(function(url) { var img = new Image() // you may want to include a more verbose error function img.onload = img.onerror = decrement; img.src = url; toReturn.push(img); }); return toReturn; } function draw() { ctx.drawImage(background, 0, 0, canvas.width, canvas.height); ctx.drawImage(front, (canvas.width - front.width) / 2, (canvas.height - front.height) / 2); } var ctx = canvas.getContext('2d'), urls = [ 'http://img13.deviantart.net/1550/i/2011/353/4/2/mobile_game_background_by_disnie-d4jmr8r.jpg', 'https://d30y9cdsu7xlg0.cloudfront.net/png/5670-200.png' ], images = preloader(urls, draw), background = images[0], front = images[1]; 
 <canvas id="canvas" width="900" height="700"></canvas>