Mengapa Imej Saya Tidak Muncul pada Kanvas HTML5?

Menambahkan Imej pada Kanvas HTML5

Menggabungkan imej ke dalam kanvas HTML5 anda boleh meningkatkan fungsi dan daya tarikan visualnya. Walau bagaimanapun, jika imej anda tidak muncul pada kanvas walaupun menetapkan sumber imej dan melukis imej dengan betul, pertimbangkan perkara berikut:

Adalah penting untuk memastikan imej telah dimuatkan sepenuhnya sebelum cuba melukisnya pada kanvas. Jika anda melukis imej sebelum ia sedia, ia tidak akan dipaparkan.

Untuk menyelesaikan isu ini dan memastikan imej dipaparkan dengan betul:

1. Gunakan Pengendali Acara onload : Lampirkan pengendali acara onload pada elemen imej. Pengendali ini akan dipanggil apabila imej telah selesai dimuatkan.
2. Lukis Imej dalam Panggilan Balik onload: Dalam pengendali acara onload, gunakan kaedah context.drawImage() untuk melukis imej pada kanvas.

Berikut ialah coretan kod yang dikemas kini yang menunjukkan pendekatan ini:

<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>

Dengan menggunakan panggilan balik onload, anda memastikan bahawa imej dimuatkan sepenuhnya sebelum ia dilukis pada kanvas, menyelesaikan isu imej tidak muncul.

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