五子棋的界面設計包括繪制棋盤、繪制棋子及黑白棋輪流落子。
涉及的知識點主要有canvas繪制直線、設置畫筆顏色；canvas畫圓、填充漸變色
1.繪制棋盤
先設定棋盤的寬、高；然後利用for循環，根據坐標使用context的一些方法來繪制
var drawChessBoard=function(){
for(var i=0;i<15;i++){ //棋盤寬高450，旁白15，間距30
context.moveTo(15+i*30,15);//橫線
context.lineTo (15+i*30,435);
context.stroke ();
context.moveTo(15,15+i*30);//豎線
context.lineTo(435,15+i*30);
context.stroke();
} }
2.繪制棋子
這裡牽涉到canvas繪制圓的情況，用畫弧形的方法來畫圓，同時設置黑棋白琪兩種顏色，用到了漸變對象，fill（）函數用來填充的。
//繪畫棋子需要首先會畫圓 ，先開始一個路徑，然後記得關閉該路徑
context.beginPath ();
context.arc(200,200,100,0,2*Math.PI );
//arc用來畫扇形，此處用來畫圓，前面兩個參數為圓心坐標，接著為半徑，起始弧度，種植弧度
context.closePath ();
var gradient=context.createRadialGradient (200,200,50,200,200,20);
//返回一個漸變的對象，前面三個參數為外圓心坐標和半徑，後面三個為內圓心坐標和半徑
gradient.addColorStop (0,"#0A0A0A");//外圓的顏色
gradient.addColorStop (1,"#636766");//內圓的顏色
context.fillStyle =gradient ;
context.fill();//fill是用來填充的*/
3.落子設置
我們需要在點擊棋盤某個位置時候落子，則需要給canvas綁定一個onclick事件，根據坐標索引來確定落子的位置，同時為了防止一個位置可以同時落黑白兩種棋我們需要先定義並初始化一個二維數組來存儲棋盤上的位置及落子情況，然後將棋盤位置沒有棋子設置為0，黑棋設置為1，白琪設置為2.點擊一次之後改變對象的值即可實現輪流落子的動作。
chess.onclick=function(e){
var x= e.offsetX;
var y= e.offsetY;
var i=Math.floor(x/30);//索引，下取整
var j=Math.floor(y/30);
if(chessBoard [i][j]==0){ //位置上沒有棋子時候才讓其落子
oneStep(i,j,me);//默認畫的是黑棋
if(me){ //落完棋子後，為了區分落下的是黑棋還是白琪分別為其設定值
chessBoard [i][j]=1;
}else{
chessBoard [i][j]=2;
}
me=!me;//黑棋下完之後換白琪 }
}