canvas实现五子棋界面

1.获取canvas画布

　　var canvas = document.getElementById('canvas');
　　var context = canvas.getContext('2d');

2.绘制直线

　　context.moveTo(x0, y0);   //起点

　　context.lineTo(x1, y1);     //终点

　　context.stroke();　　　　　//画线

3.绘制棋子

　　context.beginPath();    　　//路径起始
　　context.arc(x,  y,  r, 0, 2 * Math.PI);　　//定义圆形路径
　　context.closePath();　　　　//路径结束
　　var gradient = context.createRadialGradient(x0, y0, r0, x1, y1, r1);  //创建环形渐变
　　gradient.addColorStop(0,'#0A0A0A');　　//设置关键色1
　　gradient.addColorStop(1,'#636766');　　//设置关键色2
　　context.fillStyle = gradient;　　//设置颜色为关键色
　　context.fill();　　　　　　//填充颜色

4.效果展示:查看