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 중국어 웹사이트의 기타 관련 기사를 참조하세요!