javascript - Javascript getElementsByTagName() 奇怪的行为

Question

Connect4 - 游戏 我正在制作一个 connect4 游戏，当我将画布对象返回到一个数组时：

var canvas = document.getElementsByTagName('canvas');

它可以很好地返回前 18 个对象。Chrome javascript 控制台 (console.log(canvas[id]);) 打印出 html 标签。但超过 18 只写出 canvas#+id。因此，当我单击底部框绘制圆圈时出现错误。

function create_circle(index) {

    if (start==0) {
        color = 'red';
        start++;
    } else if (start==1) {
        color = 'black';
        start--;
    } else {
        color = 'white';
    }

    var circle = document.canvas[index].getContext('2d'); // IT SHOWS THE ERROR HERE

    circle.beginPath();
    circle.arc(40, 40, 40, 0, 2 * Math.PI, false);
    circle.fillStyle = color;
    circle.fill();
}

Answer 1

您正在使用document.canvas而不是您的canvas变量。浏览器没有document.canvas维护这样的集合。

// remove---------v
var circle = /*document.*/canvas[index].getContext('2d');