Mengapa imej saya tidak muncul pada kanvas HTML5, walaupun kod saya kelihatan betul?

Lukis Imej pada Kanvas HTML5

Anda cuba menambah imej pada kanvas, tetapi ia masih sukar difahami. Mari kita bongkar rahsia di sebalik usaha yang sukar difahami ini.

Kod anda kelihatan baik, jadi isu itu mesti terletak di tempat lain. Langkah kritikal yang anda tiada ialah memastikan imej dimuatkan sebelum cuba melukisnya.

Berikut ialah penyelesaian yang disemak:

<code class="html"><canvas id="viewport"></canvas></code>

<code class="css">canvas#viewport { border: 1px solid white; width: 900px; }</code>

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

function make_base() {
  var base_image = new Image();
  base_image.src = 'img/base.png';
  base_image.onload = function() {
    context.drawImage(base_image, 0, 0);
  };
}

make_base();</code>

Dengan menambahkan acara onload pendengar imej, anda menangguhkan lukisan sehingga imej dimuatkan sepenuhnya, menjamin kehadirannya pada kanvas.

Atas ialah kandungan terperinci Mengapa imej saya tidak muncul pada kanvas HTML5, walaupun kod saya kelihatan betul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!