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>
캔버스가있는 위치에서 HTML을 공유 할 수 있습니까? 이드의 문제 일 수도 있습니다. 아마'canvas = document.getElementById ("gameCanvas");가 인식되지 않을 수도 있습니다. ID가 맞는지 확인하십시오. – agryson
나는 여기에서 시험했다 : http://jsfiddle.net/agryson/wfxeH/ 그리고 id가 정확하다면 잘 동작한다. – agryson
내 캔버스가있는 곳에 HTML을 추가했습니다. – someone2088