내 코드가 올바른 것 같은데도 HTML5 캔버스에 내 이미지가 표시되지 않는 이유는 무엇입니까?

HTML5 캔버스에 이미지 그리기

캔버스에 이미지를 추가하려고 하지만 여전히 파악하기 어렵습니다. 이 어려운 노력 뒤에 숨은 비밀을 알아봅시다.

귀하의 코드는 정상인 것으로 보이므로 문제는 다른 곳에 있는 것 같습니다. 놓치고 있는 중요한 단계는 이미지를 그리기 전에 이미지가 로드되었는지 확인하는 것입니다.

수정된 솔루션은 다음과 같습니다.

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

onload 이벤트를 추가하여 이미지를 듣는 경우 이미지가 완전히 로드될 때까지 그리기를 지연하여 이미지가 캔버스에 존재하도록 보장합니다.

위 내용은 내 코드가 올바른 것 같은데도 HTML5 캔버스에 내 이미지가 표시되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!