画布基础知识，无法访问该对象

Question

我有一个数组，想在我的document.ready函数中使用它来调用一个函数，该函数位于外部JS文件中。但它不起作用，我真的不知道为什么。我没有使用javascript或canvas的经验，有谁可以帮我解决这个简单的问题？

<script>
    $(document).ready(function() {
        var thisIsMyArray= {
            x : 200,
            y : 150,
            size : 50
        };

        anyfunction(thisIsMyArray.x, thisIsMyArray.y, thisIsMyArray.size);
    });
</script>

外部JS：

var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext('2d');


var anyfunction = function(x, y, size) {
    ctx.beginPath();
    ctx.arc(x, y, size, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
}

Answer 1

这是因为你没有选择合适的画布。

你混淆了jQuery和JavaScript ..

您的错误

// var canvas = document.getElementsByTagName("canvas")[0]; WRONG
var canvas = $("canvas")[0]; // Use this
var canvas = document.getElementsByTagName("canvas"); // Or this

此外，您的数组是一个对象，而不是数组;）

完整代码

var canvas = $("canvas")[0];
var ctx = canvas.getContext('2d');

var anyfunction = function (x, y, size) {
    ctx.beginPath();
    ctx.arc(x, y, size, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
}

$(document).ready(function () {
    var myObject = {
        x: 30,
        y: 30,
        size: 30
    };

    anyfunction(myObject.x, myObject.y, myObject.size);
});

实施例

http://jsfiddle.net/fZBwK/