2

canvas要素を使用してJavascriptでカーソルをたどるボールをアニメーション化しようとしています。キャンバス オブジェクトへの参照を followMouse という名前の関数に渡しますが、そのコンテキストを取得しようとすると、firebug で次のエラーが発生します。

TypeError: canvas.getContext は関数ではありません

キャンバス参照をコンソールに記録すると、キャンバス要素が表示されます。関数でコンテキストを取得できない理由がわかりません。誰が何が起こっているのか知っていますか？

これが私のコードです：

function drawCircle(x, y, canvas) {
    var context = canvas.getContext('2d');
    context.beginPath();
    context.arc(x, y, 40, 0, 2 * Math.PI);
    context.fill(); 
}

function followMouse(canvas, mousePos) {
    var context = canvas.getContext("2d");
    console.log(canvas);
    context.clearRect(0, 0, 700, 700);
    var xPos = xPos + (mousePos.x - xPos) / 100;
    var yPos = yPos + (mousePos.y - yPos) / 100;
    drawCircle(xPos, yPos, canvas);
    window.requestAnimFrame(followMouse, canvas);
}

window.onload = function() {
    var canvas = document.getElementById("main");

    var mousePos = {
        x: 0,
        y: 0
    };

    canvas.addEventListener('mousemove', function(evt) {
           var pos = getMousePos(canvas, evt);
           mousePos.x = pos.x;
           mousePos.y = pos.y;
    }, false);

    followMouse(canvas, mousePos);
}
4

1 に答える 1

1

あなたのラインは、をwindow.requestAnimFrame(followMouse, canvas);呼び出しますfollowMouse(timestamp)。ここで、タイムスタンプは、によって起動されたときにコールバックに渡される番号requestAnimationFrameです。これにより、への呼び出しが発生しますがtimestamp.getContext、これは明らかに無効です。

代わりに、呼び出しを無名関数内にラップします。

window.requestAnimFrame(function() { followMouse(canvas, mousePos) }, canvas);
于 2012-10-17T20:30:32.553 に答える