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.效果展示:查看

巴特西

canvas实现五子棋界面

最新文章

热门文章