Mengapa Imej Saya Tidak Muncul pada Kanvas HTML?

Cara Menambah Imej pada Kanvas

Dalam kanvas HTML, anda boleh meningkatkan ciptaan anda dengan memasukkan imej. Walau bagaimanapun, menghadapi kesukaran apabila cuba melakukannya boleh mengecewakan. Artikel ini bertujuan untuk membimbing anda melalui proses, membincangkan isu biasa dan menyediakan penyelesaian.

Masalah: Walaupun mempunyai sumber imej sedia ada dan tiada ralat JavaScript, imej gagal dipaparkan pada kanvas.

Penyelesaian: Adalah penting untuk memastikan imej dimuatkan sepenuhnya sebelum cuba melukisnya ke atas kanvas. Ubah suai kod anda untuk memasukkan pendengar acara onload pada imej, seperti yang dilihat di bawah:

<code class="javascript">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>

Dengan memasukkan pelarasan mudah ini, imej anda kini akan berjaya muncul pada kanvas setelah ia dimuatkan, membolehkan anda untuk tingkatkan reka bentuk anda dengan elemen visual.

Atas ialah kandungan terperinci Mengapa Imej Saya Tidak Muncul pada Kanvas HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!