棋盘点击不显示棋子？

Question

我的代码里面省略了背景图、省略了颜色渐变，但是点击鼠标事件触发不了？求解释

页面代码为：<canvas id="chess" width="450px" height="450px"></canvas>

js代码为：

window.onload=function(){

drawchessboard();

drawchess(0,0,true);

drawchess(1,1,false);

}

var a =document.getElementById('chess');

var txt=a.getContext('2d');

var drawchess=function(i,j,me){

if(me){

txt.fillStyle="#000000";

}

else{

txt.fillStyle="#808080";

}

txt.beginPath();

txt.arc(15+i*30,15+30*j,15,0,Math.PI*2,true);

txt.closePath();

txt.fill();

}

var drawchessboard=function() {

for(var i=0;i<15;i++)

{

txt.moveTo(15,15+i*30);

txt.lineTo(435,15+i*30);

txt.moveTo(15+i*30,15);

txt.lineTo(15+i*30,435);

txt.stroke();

}

}

chess.onclick=function (e) {

var x=offsetX;

var y=offsetY;

var i=Math.floor(x/30);

var j=Math.floor(y/30);

drawchess(i,j,true);

alert("hello");

}

Answer 1

点击事件的对象 chess 应该是 document.getElementById('chess'); 而你所获取对象的变量名是 a ，不是chess 。