本文为大家分享了JS canvas绘制五子棋棋盘的具体代码，供大家参考，具体内容如下
box-shadow:给元素块周边添加阴影效果。
语法：box-shadow: h-shadow v-shadow blur spread color inset；
h-shadow: （必须）阴影的水平偏移量，如果是正值，则阴影在元素块右边；如果是负值，则阴影在元素块左边。
v-shadow: （必须）阴影的垂直偏移量，如果是正值，则阴影在元素块底部；如果是负值，则阴影在元素块顶部。
blur: （可选）阴影的模糊半径，其值大于等于0；为0时阴影不具有模糊效果，值越大阴影边缘越模糊。
spread: （可选）阴影扩展半径，值为正，整个阴影都扩大；值为负，整个阴影都缩小。
color: （可选）阴影颜色。
insert: （可选）不设值则默认为外部阴影，取insert则投影为内阴影。
前端精品教程：百度网盘下载
代码如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>五子棋</
title
>
<
style
type
=
"text/css"
>
canvas{
display: block;
margin: 50px auto;
box-shadow: -2px -2px 2px #F3F2F2, 5px 5px 5px #6F6767;
}
</
style
>
</
head
>
<
body
>
<
canvas
id
=
"mycanvas"
width
=
"450px"
height
=
"450px"
></
canvas
>
<
script
type
=
"text/javascript"
>
var chess = document.getElementById("mycanvas");
var context = chess.getContext('2d');
var me = true;
var chessBox = [];//用于存放棋盘中落子的情况
for(var i=0;i<
15
;i++){
chessBox[i]=[];
for(var
j
=
0
;j<15;j++){
chessBox[i][j]=0;//初始值为0
}
}
function drawChessBoard(){
for(var
i
=
0
;i<15;i++){
context.strokeStyle
=
"#D6D1D1"
;
context.moveTo(15+i*30,15);//垂直方向画15根线，相距30px;
context.lineTo(15+i*30,435);
context.stroke();
context.moveTo(15,15+i*30);//水平方向画15根线，相距30px;棋盘为14*14；
context.lineTo(435,15+i*30);
context.stroke();
}
}
drawChessBoard();//绘制棋盘
function oneStep(i,j,k){
context.beginPath();
context.arc(15+i*30,15+j*30,13,0,2*Math.PI);//绘制棋子
var
g
=
context
.createRadialGradient(15+i*30,15+j*30,13,15+i*30,15+j*30,0);//设置渐变
if(k){ //
k
=
true
是黑棋，否则是白棋
g.addColorStop(0,'#0A0A0A');//黑棋
g.addColorStop(1,'#636766');
}else {
g.addColorStop(0,'#D1D1D1');//白棋
g.addColorStop(1,'#F9F9F9');
}
context.fillStyle
=
g
;
context.fill();
context.closePath();
}
chess.onclick
=
function
(e){
var
x
=
e
.offsetX;//相对于棋盘左上角的x坐标
var
y
=
e
.offsetY;//相对于棋盘左上角的y坐标
var
i
=
Math
.floor(x/30);
var
j
=
Math
.floor(y/30);
if( chessBox[i][j] == 0 ) {
oneStep(i,j,me);
if(me){
chessBox[i][j]=1;
}else{
chessBox[i][j]=2;
}
me=!me;//下一步白棋
}
}
</script>
</
body
>
</
html
>
|
效果图是这样的
前端精品教程：百度网盘下载