javascript - 画布基础，无法访问对象

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/