Mengapa Imej Kanvas Saya Tidak Dilukis? Kepentingan Pemuatan Imej Asynchronous.

Menunggu Muatan Imej Sebelum Melukis

Apabila cuba menambah imej pada kanvas, adalah penting untuk memastikan imej dimuatkan sebelum cuba melukisnya. Isu yang anda hadapi dalam kod anda adalah disebabkan oleh sifat tidak segerak pemuatan imej.

Untuk menyelesaikan isu ini, anda perlu menambah fungsi panggil balik pada acara onload imej. Fungsi panggil balik ini akan dilaksanakan apabila imej telah selesai dimuatkan, memastikan data imej tersedia sebelum anda cuba melukisnya.

Kod yang diperbetulkan di bawah akan menunggu imej dimuatkan sebelum melukisnya ke kanvas :

<code class="js">var canvas = document.getElementById('viewport'),
    context = canvas.getContext('2d');

make_base();

function make_base() {
  base_image = new Image();
  base_image.src = 'img/base.png';
  base_image.onload = function() {
    context.drawImage(base_image, 100, 100);
  };
}</code>

Atas ialah kandungan terperinci Mengapa Imej Kanvas Saya Tidak Dilukis? Kepentingan Pemuatan Imej Asynchronous.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!