5

「mousemove」を使用して、キャンバス上でマウスをたどる正方形を取得しようとしています。

function start(){
    var canvastmp = document.getElementById("myCanvas")
    var canvas = canvastmp.getContext("2d");
    window.addEventListener('mousemove', trevor, false);
}
function trevor(pos){
    canvas.clearRect(0,0,600,400);
    var x = pos.clientX;
    var y = pos.clientY;
    canvas.fillRect(x-25,y-25,100,100);
}
window.addEventListener('load',start,false);

実行すると、何も表示されません。しばらくの間、微調整して精査してきましたが、何が問題なのかわかりません。繰り返しますが、まったく初心者の質問で申し訳ありません。どんな助けでも大歓迎です。

また、それが役立つ場合は、Chromeを使用しています。

4

3 に答える 3

2

問題は、それcanvasが範囲外であることです。スコープに戻すには、関数内に trevor 関数を埋め込むかstart、キャンバス コンテキストを変数としてクロージャに渡します。

function start(){
    var canvastmp = document.getElementById("myCanvas")
    var ctx = canvastmp.getContext("2d");
    window.addEventListener('mousemove', function(pos){trevor(ctx,pos)}, false);
}
function trevor(ctx, pos){
    ctx.clearRect(0,0,600,400);
    var x = pos.clientX;
    var y = pos.clientY;
    ctx.fillRect(x-25,y-25,100,100);
}
window.addEventListener('load',start,false);

または、よりオブジェクトに似たアプローチを使用します。

function trevor(ctx) {
    function moveHandler(pos) {
        ctx.clearRect(0,0,600,400);
        ctx.fillRect(pos.clientX - 25, pos.clientY - 25, 100, 100);
    }
}
var myTrevor = trevor((document.getElementById('myCanvas')).getContext('2d'));
window.addEventListener('load', myTrevor.moveHandler, false);

これの良いところは、コンテキストが常に関連していることです。trevor は与えられたコンテキストしか認識しておらず、イベント ハンドラーを設定するコードもコンテキストを取得します。

于 2012-10-14T06:14:09.163 に答える
0

変数canvasは function で定義されていますstartが、関数で参照するとtrevorスコープ外になります。

両方の機能の範囲内にあるように両方の関数から定義すると、これが機能します。

参照 - http://jsfiddle.net/sync/mE4B4/

var canvas;

function start() {
    var canvastmp = document.getElementById("myCanvas");
    canvas = canvastmp.getContext("2d");
    window.addEventListener('mousemove', trevor, false);
}

function trevor(pos) {
    canvas.clearRect(0, 0, 600, 400);
    var x = pos.clientX;
    var y = pos.clientY;
    canvas.fillRect(x - 25, y - 25, 100, 100);
}

window.addEventListener('load', start, false);​
于 2012-10-14T06:09:16.930 に答える
0

Chrome を使用しているとのことですが、そうであれば、組み込みのインスペクター ([ツール] > [開発者ツール]) を確認してください。[コンソール] タブにエラーが表示されます。そこを見ると、 のようなものが表示されますがCanvas not defined、これは役に立つヒントです。

「キャンバス」変数は範囲外でした。以下が機能します。

function mousemove(pos) {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.clearRect(0,0,600,400);

  var x = pos.clientX;
  var y = pos.clientY;

  ctx.fillStyle="#FF0000";
  ctx.fillRect(x-25,y-25,50,50);
}

window.addEventListener('mousemove', mousemove, false);

ライブデモはこちら

于 2012-10-14T06:10:25.420 に答える