Javascript 画布上的DrawImg需要更多的点击来绘制

这是一款使用canvas的tic-tac-toe游戏，点击时使用了onclick和draw图像，但有时需要2次以上的点击才能绘制图像。我想这是因为其他函数在$（function（）…）之外，但将它们放入会导致错误。对不起，我是新手

$（函数（）{
让canvas=document.getElementById（“canvas”）；
设ctx=canvas.getContext（'2d'）；
ctx.beginPath（）；ctx.moveTo（200,0）；ctx.lineTo（200600）；ctx.stroke（）；
ctx.beginPath（）；ctx.moveTo（100,0）；ctx.lineTo（100600）；ctx.stroke（）；//Lineas deljuego
ctx.beginPath（）；ctx.moveTo（0100）；ctx.lineTo（600100）；ctx.stroke（）；
ctx.beginPath（）；ctx.moveTo（0,50）；ctx.lineTo（600,50）；ctx.stroke（）；
});
var=0；
函数marcar（e）{
var x=e.pageX；
console.log（e.pageX）；
var y=e.pageY；
cuadranteX=0；
cuadranty=0；
如果（x>=7&&x=211&&x=7&&y=212&&y绘制图像的步骤：

    var img = new Image();
    if(turns%2==0)
        img.src ="./img/blackcat.png"
    else
        img.src ="./img/whitecat.png"
    ctx.drawImage(img,x,y,90,45);  

…这并不保证映像已完全加载，

请看一些如何正确使用的示例：



但对于这样简单的事情，我不会使用图像，只要画一个字母（X或O）。

如果您的数学/如果条件过于复杂，请参见下面的示例


let size=60//square\u size
让canvas=document.getElementById（“canvas”）；
canvas.width=canvas.height=size*3；
设ctx=canvas.getContext（'2d'）；
ctx.font='48px serif'；
ctx.beginPath（）；ctx.moveTo（大小*2,0）；ctx.lineTo（大小*2，大小*3）；ctx.stroke（）；
ctx.beginPath（）；ctx.moveTo（大小，0）；ctx.lineTo（大小，大小*3）；ctx.stroke（）；
ctx.beginPath（）；ctx.moveTo（0，大小*2）；ctx.lineTo（大小*3，大小*2）；ctx.stroke（）；
ctx.beginPath（）；ctx.moveTo（0，大小）；ctx.lineTo（大小*3，大小）；ctx.stroke（）；
var=0；
函数marcar（e）{
var x=e.pageX；
var y=e.pageY；
cuadranteX=数学地板（x/尺寸）%3；
cuadranteY=数学地板（y/尺寸）%3；
绘制（cuadranteX，cuadranteY）；
}
函数图（x，y）{
ctx.fillStyle=变为%2==0？“红色”：“蓝色”
ctx.fillText（将%2==0？：X:“O”，X*大小+10，y*大小+45）
转向++；
}
绘制图像的步骤：

    var img = new Image();
    if(turns%2==0)
        img.src ="./img/blackcat.png"
    else
        img.src ="./img/whitecat.png"
    ctx.drawImage(img,x,y,90,45);  

…这并不保证映像已完全加载，

请看一些如何正确使用的示例：



但对于这样简单的事情，我不会使用图像，只要画一个字母（X或O）。

如果您的数学/如果条件过于复杂，请参见下面的示例


let size=60//square\u size
让canvas=document.getElementById（“canvas”）；
canvas.width=canvas.height=size*3；
设ctx=canvas.getContext（'2d'）；
ctx.font='48px serif'；
ctx.beginPath（）；ctx.moveTo（大小*2,0）；ctx.lineTo（大小*2，大小*3）；ctx.stroke（）；
ctx.beginPath（）；ctx.moveTo（大小，0）；ctx.lineTo（大小，大小*3）；ctx.stroke（）；
ctx.beginPath（）；ctx.moveTo（0，大小*2）；ctx.lineTo（大小*3，大小*2）；ctx.stroke（）；
ctx.beginPath（）；ctx.moveTo（0，大小）；ctx.lineTo（大小*3，大小）；ctx.stroke（）；
var=0；
函数marcar（e）{
var x=e.pageX；
var y=e.pageY；
cuadranteX=数学地板（x/尺寸）%3；
cuadranteY=数学地板（y/尺寸）%3；
绘制（cuadranteX，cuadranteY）；
}
函数图（x，y）{
ctx.fillStyle=变为%2==0？“红色”：“蓝色”
ctx.fillText（将%2==0？：X:“O”，X*大小+10，y*大小+45）
转向++；
}
请提供您的HTML。正文中只有
请提供您的HTML。正文中只有
使用
ctx。fillText
效果更好，谢谢使用
ctx。fillText
效果更好，谢谢