1.首先设置画布
HTML:
<div style="width: 600px;margin: 0 auto;border: 5px solid black;background: #e7e7e7;">
<canvas width="600px" height="600px" id="canvas" onclick="play()"></canvas>
</div>
JS:
var canvas=document.getElementById("canvas");
handl=canvas.getContext("2d");
handl.fillStyle="#e7e7e7";//背景色设置
handl.fillRect(0,0,600,600);//矩形填充,坐标,宽高;但是以HTML中设置的宽高为主,若超过则不显示。
2.划线
handl.moveTo(x1,y1);
handl.lineTo(x2,y2);
handl.stroke();//划线
handl.strokeStyle="######"
3.填充
handl.fillStyle="######'
handl.fill()
PS:先后顺序不要忘记
4.画圆
handl.beginPath();
handl.arc(250,200,100,0,2*Math.PI);
handl.closePath();
1
2 var canvas=document.getElementById("canvas");
3 handl=canvas.getContext("2d");
4 handl.fillStyle="#e7e7e7";
5 handl.fillRect(0,0,600,600);
6
//划线,(棋盘)
7 for(i=0;i<16;i++){
8 handl.moveTo(20,20+i*40);
9 handl.lineTo(580,20+i*40);
10 handl.stroke();
11
12 handl.moveTo(20+i*40,20);
13 handl.lineTo(20+i*40,580);
14 handl.stroke();
15 }
16 //记录棋盘上的哪些位置有棋子(黑棋还是白棋)
17 player=1;
18 var result=new Array();
19 for(i=0;i<16;i++){
20 result[i]=new Array();
21 for(j=0;j<16;j++){
22 result[i][j]=0;
23 }
24 }
25 //记录落子位置(先判断在横竖着的第几条线,在确定具体坐标,)
26 function play(e){
27 if(player==3){return;}
28 e=e||window.event;
29 x=e.layerX-20;
30 y=e.layerY-20;
31
32 x=Math.floor(x/40)+(x%40>20?1:0);
33 y=Math.floor(y/40)+(y%40>20?1:0);
34
35 if(result[x][y]){
36 alert("此处不能落子!");
37 return;}
38
39 handl.beginPath();
40 handl.arc(x*40+20,y*40+20,15,0,2*Math.PI);
41 //先fillStyle后fill()
42 if(player==1){
43 handl.fillStyle="#000";
44 handl.fill();
45 player=2;
46 }else{
47 handl.fillStyle="#fff";
48 handl.fill();
49 player=1;
50 }
51 handl.closePath();
52
53 result[x][y]=player;
54 result_check(x,y,play);
55 }
56 //判断(倒着的第一象限)
57 function result_check(x,y){
58 //横(从这个点开始往前数5个,往后数5个,看看有没有5子相连的,记得判断边界情况,不能溢出)
59 startx=(x-4)>0?(x-4):0;
60 for(i=startx;i<=x;i++){
61 if(i+4>15){
62 break;
63 }
64 if(result[i][y]*result[i+1][y]*result[i+2][y]*result[i+3][y]*result[i+4][y]==32)
65 {
66 alert("黑子获胜!");
67 player=3;
68 }
69 else if(result[i][y]*result[i+1][y]*result[i+2][y]*result[i+3][y]*result[i+4][y]==1)
70 {
71 alert("白子获胜!");
72 player=3;
73 }
74 }
75
76 //纵(同横)
77 starty=y-4;
78 for(i=starty;i<=y;i++){
79 if(i+4>15){break;}
80 if(result[x][i]*result[x][i+1]*result[x][i+2]*result[x][i+3]*result[x][i+4]==32){
81 alert("黑子获胜!");
82 player=3;
83 }
84 else if(result[x][i]*result[x][i+1]*result[x][i+2]*result[x][i+3]*result[x][i+4]==32){
85 alert("白子获胜!");
86 player=3;
87 }
88 }
89
90 //正斜(x,y都在增加,判断边界情况,x大还是y大)
91 if(x>y){
92 starty=y-4>0?y-4:0;
93 startx=y-4>0?(x-4):(x-(y-starty));
94 }else{
95 startx=x-4>0?x-4:0;
96 starty=x-4>0?(y-4):(y-(x-starty));
97 }
98 for(i=startx;i<=x;i++){
99 if(i+4>15||starty+4>15){break;}
100 if(result[i][starty]*result[i+1][starty+1]*result[i+2][starty+2]*result[i+3][starty+3]*result[i+4][starty+4]==32){
101 alert("黑子获胜!");
102 player=3;
103 }else if(result[i][starty]*result[i+1][starty+1]*result[i+2][starty+2]*result[i+3][starty+3]*result[i+4][starty+4]==1)
104 {
105 alert("白子获胜!");
106 player=3;
107 }
108 starty++;
109 }
110
111 //反斜(x在增加,y在减少,临界记得判断(0,15)-(15,0))
112 startx=x-4;
113 starty=y+4;
114 if(startx<0){startx=0;starty=y+(x-startx)}
115 if (starty>15) {starty=15;startx=x-(15-starty)}
116 for(i=startx;i<=x;i++){
117 if(i+4>15||starty-4<0){break}
118 if(result[i][starty]*result[i+1][starty-1]*result[i+2][starty-2]*result[i+3][starty-3]*result[i+4][starty-4]==32){
119 alert("黑子获胜!");
120 player=3;
121 }else if (result[i][starty]*result[i+1][starty-1]*result[i+2][starty-2]*result[i+3][starty-3]*result[i+4][starty-4]==1) {
122 alert("白子获胜!");
123 player=3;
124 }
125 starty--;
126 }
127 }
128 </script>
效果图: