五子棋——从棋谱到人机对战

1、棋谱的绘制

　　（1），这里主要是用到html5中的canvas标签，他代表画布的意思。定义一个canvas标签，给他的一个宽度和高度，就相当于准备好画画的画布。因为canvas是一个行内标签，所以要让其水平居中，只有一个margin:0 auto是不够的，还要配合display:block将其变为块级标签后才能水平居中。

　　（2），利用js加载一张水印图片

　　　　var img=new Image();

　　　　img.src="图片的路径";

　　　　img.onload=function(){

　　　　　　context.drawImage(img,left,top,right,bottom);//图片  左上点坐标   右下点坐标

　　　　};

　　（3），就要利用js去在画布上实现棋谱的绘制。分为三个步骤：

　　　　①拿到画布这个对象 var ocanvas=document.getElementById("canvas的id名字");

　　　　②获取绘画的权限  var context=ocanvas.getContext("2d");//因为画的是平面图，所以选择2d

　　　　③开始绘画  

　　　　　　i:设置起点context.moveTo(x,y);  

　　　　　　ii:设置终点context.lineTo(x,y);  

　　　　　　iii:设置画线颜色context.strokeStyle("颜色代码");  

　　　　　　iV:开始画线context.stroke();　　

　　（4），js实现棋子的绘制，棋子的绘制简单来说就是画圆

　　　　　　开始路径：context.beginPath();

　　　　　　画圆　　：context.arc(x,y,r,0,2*Math.PI);//圆心横坐标  圆心纵坐标   半径（默认px） 0  周长

　　　　　　结束路径：context.closePath();

　　　　　　画一个黑色棋子，需要填充色：context.filleStyle="颜色代码";context.fill();

　　　　　　开始绘画：context.stroke();

　　　　这样的话就能画出一个黑色的棋子，可是这样的棋子没有立体感，只是一个黑色的圆。如果一直画圆，从外圆到内圆，让其有不同的填充色的话，就会有立体感了。

　　　　　　开始路径：context.beginPath();

　　　　　　画圆　　：context.arc(x,y,r,0,2*Math.PI);//圆心横坐标  圆心纵坐标   半径（默认px） 0  周长

　　　　　　结束路径：context.closePath();

　　　　　　设置一个渐变色：var gradient=context.createRadialGradient(x,y,R,x,y,0);//从最外圆画到最内圆
　　　　　　　　　　　　      gradient.addColorStop(0,"#0a0a0a");
　　　　　　　　　　　　      gradient.addColorStop(1,"#636767");

　　　　　　画一个黑色棋子，需要填充色：context.filleStyle=gradient;context.fill();

　　　　　　开始绘画：context.stroke();

2、最终效果图

3、实现人工智能——人机大战