类型错误：canvas.getContext 不是函数答案

【问题标题】：TypeError: canvas.getContext is not a function类型错误：canvas.getContext 不是函数
【发布时间】：2012-10-17 20:20:45
【问题描述】：

我正在尝试使用 canvas 元素在 Javascript 中为跟随光标的球设置动画。我将对我的画布对象的引用传递给名为 followMouse 的函数，但是当我尝试获取它的上下文时，萤火虫给了我这个错误：

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);
}

【问题讨论】：

ID为main的元素真的是画布元素吗？请记住，ID 必须是唯一的。
是的。正如我所说，它在登录时显示在控制台中。
你对 window.requestAnimFrame 的使用很奇怪。你不应该设置回调吗？如果您设置了回调，您确定它提供画布作为第一个参数吗？
@dystroy followMouse 不是回调吗？
@dystoy 确实：回调到 window.requestAnimationFrame is provided a numeral timestamp 作为第一个参数。

标签： javascript canvas

【解决方案1】：

您的行window.requestAnimFrame(followMouse, canvas); 调用followMouse(timestamp)，其中timestamp 是一个数字，当它被requestAnimationFrame 触发时传递给回调。这导致调用timestamp.getContext，显然是无效的。

相反，将您的调用包装在一个匿名函数中：

window.requestAnimFrame(function() { followMouse(canvas, mousePos) }, canvas);

【讨论】：