2

HTML5 でのドラッグ アンド ドロップ キャンバスの質問への回答で提案されたチュートリアルに従ってみましたが、Firefox でページを読み込むと、Firebug コンソールに「キャンバスが null です」というエラーが表示されます。

それが不平を言っているファイルは、ユーザー操作用のコードを配置した JS ファイルです。

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;

主なエラーは「canvas is null」です。それを展開すると、init()22interaction.js()行目、57 行目でエラーが発生します。22 行目は次の行です。

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

57行目は次の行です。

init();

誰かが私が間違っているところを指摘できますか?

乾杯。

私のキャンバスがあるHTMLはこれです：

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

2 に答える 2

1

init()メソッドが呼び出されたときにcanvasレンダリングされないようです。
使用する

window.onload = function() {
  init();
};
于 2012-11-27T12:56:22.633 に答える
0

私はあなたのコードをここでテストしました: http://jsfiddle.net/agryson/wfxeH/ キャンバスの ID に間違いがあると確信しています。HTML に以下があることを確認してください。

<canvas id="gameCanvas"></canvas>
于 2012-11-27T12:57:08.893 に答える