HTML5 Canvas uygulamaları birden fazla görüntü gerektirdiğinde, tuval üzerine çizim yapmadan önce tüm görüntüleri yüklemek iyi bir fikirdir. Yükleme işlemini basitleştirmek için, bir görüntü kaynağı özeti alan, bir görüntü özeti oluşturan ve ardından görüntülerin tümü yüklendiğinde bir kullanıcı tanımlı işlevi çağıran bir görüntü yükleyici işlevi kullanmak uygundur.
Çıktı:
Kod:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <canvas id="canvas" width="578" height="200"></canvas> <script> function loadImages(kaynak, callback) { var resimler = {}; var resimYukle = 0; var resimSayisi = 0; //resim sayısını alın for(var src in kaynak) { resimSayisi++; } for(var src in kaynak) { resimler[src] = new Image(); resimler[src].onload = function() { if(++resimYukle >= resimSayisi) { callback(resimler); } }; resimler[src].src = kaynak[src]; } } var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var kaynak = { happy: 'https://www.tasarimkodlama.com/wp-content/uploads/2019/04/001-happy.png', unhappy:'https://www.tasarimkodlama.com/wp-content/uploads/2019/04/002-unhappy.png', inlove:'https://www.tasarimkodlama.com/wp-content/uploads/2019/04/003-in-love.png', happy2:'https://www.tasarimkodlama.com/wp-content/uploads/2019/04/004-happy-1.png' }; loadImages(kaynak, function(resimler) { context.drawImage(resimler.happy, 50, 20); context.drawImage(resimler.unhappy, 50, 100); context.drawImage(resimler.inlove, 150, 20); context.drawImage(resimler.happy2, 150, 100); }); </script> |
Yorum Yap