내 캔버스 이미지가 그려지지 않는 이유는 무엇입니까? 비동기 이미지 로딩의 중요성.-JS 튜토리얼-php.cn

내 캔버스 이미지가 그려지지 않는 이유는 무엇입니까? 비동기 이미지 로딩의 중요성.

Susan Sarandon

풀어 주다： 2024-10-30 12:32:52

원래의

547명이 탐색했습니다.

Why Does My Canvas Image Not Draw? The Importance of Asynchronous Image Loading.

그리기 전 이미지 로드 대기

캔버스에 이미지를 추가하려고 할 때 이미지가 로드되기 전에 먼저 로드되었는지 확인하는 것이 중요합니다. 그것을 그려보려고 합니다. 코드에서 발생한 문제는 이미지 로딩의 비동기 특성으로 인해 발생합니다.

이 문제를 해결하려면 이미지의 onload 이벤트에 콜백 함수를 추가해야 합니다. 이 콜백 함수는 이미지 로드가 완료되면 실행되어 이미지를 그리기 전에 이미지 데이터를 사용할 수 있는지 확인합니다.

아래 수정된 코드는 이미지를 캔버스에 그리기 전에 이미지가 로드될 때까지 기다립니다. :

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

로그인 후 복사

위 내용은 내 캔버스 이미지가 그려지지 않는 이유는 무엇입니까? 비동기 이미지 로딩의 중요성.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!