angularjs를로드 한 후 HTML 캔버스가 작동하지 않습니다.

AngularJS를 배우고 있습니다. AngularJS를 긴 코드 조각에 추가하려고합니다.이 조각은 캔버스를 사용하는 그래픽을 포함합니다. 아래의 최소한의 코드로 문제를 재현 할 수있었습니다. 기본적으로 AngularJS 만로드하면됩니다. 코드가 작동하지 않습니다. 나는 angularjs 사이트를 물색했지만 아무것도 발견하지 못했습니다.angularjs를로드 한 후 HTML 캔버스가 작동하지 않습니다.

anglejs를로드하는 행에 주석을 달면 직사각형이 그려집니다. 코드를 그대로 사용하면 화면이 비어 있습니다.

`!DOCTYPE html> 
<head> 
<html xmlns:ng="http://angularjs.org" ng-app> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script> 
</head> 
<body> 

<canvas id='canvas' width='500' height='500'>Canvas is not supported by this browser.</canvas> 
<script src="angular.js"> 
<script type="text/javascript" > 

    function DrawMe() { 
     var canvas = document.getElementById("canvas"); 
     var context = canvas.getContext('2d'); 
     context.strokeStyle = '#808080'; 
     context.fillRect(0, 0, canvas.width, canvas.height); 
    } 

    $(document).ready(function() { 
     DrawMe(); 
    }); 

</script> 

</body> 
</html>`

출처

2014-04-11 cauchy

귀하의 코드가 전혀 AnuglarJS과 통합하지 않는 이유는 무엇입니까? – Chandermani

하지만이 시점에서는 그렇지 않습니다. 그것이 AngularJS와 관련된 정보를 아직 부르지 않은 저를 죽이는 것입니다. – cauchy

닫는 태그를 추가하십시오. – ruedamanuel

당신은 당신의 캔버스 요소에 대한 참조를 얻을 필요가 :

function DrawMe() { 

    // get a reference to the canvas element 
    var canvas=getElementById("canvas"); 

    var context = canvas.getContext('2d'); 
    context.strokeStyle = '#808080'; 
    context.fillRect(0, 0, canvas.width, canvas.height); 
}

출처

2014-04-11 17:15:29 markE

당신 말이 맞아요. var canvas = document.getElementById ("canvas");를 추가했습니다. 하지만 여전히 아무것도. 질문에서 코드를 수정합니다. – cauchy

angularjs를로드 한 후 HTML 캔버스가 작동하지 않습니다.

답변

관련 문제