2012-11-27 7 views
2

Drag and Drop canvas in HTML5 질문에 대한 답변에서 제안한 튜토리얼을 시도했지만 Firebug에서 내 페이지를로드 할 때 Firebug 콘솔에 "canvas is null"이라는 오류가 표시됩니다.javascript를 사용하여 html5 캔버스에서 이미지를 드래그 앤 드롭

그것에 대해 불평이 파일은 I가 사용자 상호 작용을위한 코드를 삽입 한 JS 파일입니다 : 주요 오류 "캔버스가 null"입니다

var canvas; 
var ctx; 
var x = 75; 
var y = 50; 
var WIDTH = 400; 
var HEIGHT = 300; 
var dragok = false; 

function rect(x,y,w,h) { 
ctx.beginPath(); 
ctx.rect(x,y,w,h); 
ctx.closePath(); 
ctx.fill(); 
} 

function clear() { 
ctx.clearRect(0, 0, WIDTH, HEIGHT); 
} 

function init() { 
canvas = document.getElementById("gameCanvas"); 
ctx = canvas.getContext("2d"); 
return setInterval(draw, 10); 
} 

function draw() { 
clear(); 
ctx.fillStyle = "#FAF7F8"; 
rect(0,0,WIDTH,HEIGHT); 
ctx.fillStyle = "#444444"; 
rect(x - 15, y - 15, 30, 30); 
} 

function myMove(e){ 
if (dragok){ 
    x = e.pageX - canvas.offsetLeft; 
    y = e.pageY - canvas.offsetTop; 
} 
} 

function myDown(e){ 
if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 + 
canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop && 
e.pageY > y -15 + canvas.offsetTop){ 
    x = e.pageX - canvas.offsetLeft; 
    y = e.pageY - canvas.offsetTop; 
    dragok = true; 
    canvas.onmousemove = myMove; 
} 
} 

function myUp(){ 
dragok = false; 
canvas.onmousemove = null; 
} 

init(); 
canvas.onmousedown = myDown; 
canvas.onmouseup = myUp; 

, 내가 있음을 확장 할 때, 그것에 대해 불평

:

ctx = canvas.getContext("2d"); 

라인 57 라인 : 라인에서 라인 (22), interaction.js()init() 는 57 라인 (22)은 라인

누군가 내가 잘못 가고있는 것을 지적 할 수 있습니까?

건배.

내 캔버스입니다 HTML은 이것이다 :

<canvas id="gameCanvas" width="1000" height="500" style="border:1px solid"> 
    Your browser does not support the canvas element. 
    </canvas> 
+0

캔버스가있는 위치에서 HTML을 공유 할 수 있습니까? 이드의 문제 일 수도 있습니다. 아마'canvas = document.getElementById ("gameCanvas");가 인식되지 않을 수도 있습니다. ID가 맞는지 확인하십시오. – agryson

+0

나는 여기에서 시험했다 : http://jsfiddle.net/agryson/wfxeH/ 그리고 id가 정확하다면 잘 동작한다. – agryson

+0

내 캔버스가있는 곳에 HTML을 추가했습니다. – someone2088

답변

1

당신의 init() 방법은 canvas가 렌더링되지 않습니다 호출 할 때 보인다.
사용 나는 여기에 코드 테스트 한

window.onload = function() { 
    init(); 
}; 
+0

답장을 보내 주셔서 감사합니다. 나는이 코드의 일부를 다음과 같이 변경했다 :'window.onload = function() { \t init(); } canvas.onmousedown = myDown; canvas.onmouseup = myUp 나는 때문에 라인의 오류를받지 못했습니다' 와'canvas.onmousedown = myDown;'와 'canvas.onmouseup = myUp, 나는이 선을 넣어해야' ? 이 오류는 캔버스가 정의되지 않았기 때문에 함수에 있어야하기 때문에 캔버스라고 가정합니다. 그러나 어느 것이 확실하지 않습니다. – someone2088

+0

'canvas.onmousedown = myDown; 줄을 채 웁니다. canvas.onmouseup = myUp;'위의 window.onload = function() {}'블록 – prageeth

+0

위대한 건배. 그게 내가 가진 오류를 없애 버렸지 만 그 코드는 내가 캔버스에 그려 넣은 이미지에 드래그 앤 드롭 기능을 추가하지 않았다. 내가 여기에 놓친 것이 있는가? – someone2088

0

: http://jsfiddle.net/agryson/wfxeH/ 을 나는 당신이 아마 캔버스의 ID에 실수를 한 것을 확신합니다. HTML에 다음이 포함되어 있는지 확인하십시오.

<canvas id="gameCanvas"></canvas> 
+0

당신의 코멘트를 가져 주셔서 감사합니다. 그러나 캔버스 ID – someone2088

+0

에 대한 나의 HTML은 이미 알고 있습니다. 귀하의 HTML 스 니펫을 게시하기 전에 귀하의 HTML 스 니펫을 게시했습니다. (귀하의 질문에 대한 나의 마지막 코멘트를 참조하십시오.) 그러나 glad @ prageeth의 답변이 도움이되었습니다. :) – agryson

관련 문제