JS 함수 호출이 작동하지 않습니다.

-2

간단한 JS 캔버스를 작성하려고했지만 그릴 수 없습니다. 크롬의 개발자 콘솔에서 renderCanvas()를 호출하면 작동하지만 코드에서 호출하면 작동하지 않습니다. 어떤 아이디어? 나는JS 함수 호출이 작동하지 않습니다.

<!DOCTYPE html> 
<html> 
<head> 
    <title>JSolitaire</title> 
</head> 
<body> 
    <canvas id="canvas" width="640" height="480"></canvas> 
    <script> 
    renderCanvas(); 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 
    var bgReady = false; 
    var bgImage = new Image(); 
    bgImage.src = "background.png"; 
    bgImage.onload = new function(){ 
     bgReady = true; 
    }; 

    function renderCanvas(){ 
     if(bgReady) 
      ctx.drawImage(0, 0, bgImage); 
    }; 
    </script> 
</body> 
</html>

출처

2016-07-01 user3450456

을 할 수 bgReady를 사용하여 아무 소용이 없습니다 ... 그림이 있다는 것을 확신? – trincot

첫 번째 호출로 renderCanvs가 있으며 배경로드를 시작하지 않았습니다. 이미지로드를 기다려야하므로 renderCanvas를 onload 함수에 넣으십시오. – Blindman67

그냥 왜`new` 키워드 function``전에이

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var bgImage = new Image(); 
bgImage.src = "background.png"; 
bgImage.onload = function() { 
    renderCanvas(); 
}; 
function renderCanvas() { 
    ctx.drawImage(bgImage, 0, 0); 
};

출처

2016-07-01 20:42:29 WinterCore

이 방법이 유용하지만 drawImage의 첫 번째 매개 변수로 bgImage를 추가해야했습니다. ctx.drawImage (bgImage, 0, 0); – Airborne

예, 그냥 ctx.drawImage (image, dx, dy)가되어야하는 함수를 확인했습니다. 감사합니다. – WinterCore

@WinterCore. 와우, 당신이 콘솔에서 작동한다고 말씀하셨습니까? 어떻게 그렇게 될수 있니? – trincot

JS 함수 호출이 작동하지 않습니다.

답변

관련 문제