2013/12/27 | ^画※哲^

首先一点就是，本测试使用的时html5的画布canvas来绘制所有的东西，使用的时js控制，所以务必要求流浪器支持HTML5才行。

步骤：
第一点：先写出基本的布局，也就是你要在什么位置画图，以及你的画布有多大，这些都是要实现设定好的，这里是在HTML标签里面预设，还有就是在css里面设置。
第二点：再则有了画布，这时我们就可以考虑如何画出一个棋盘，这里采用的是画线的形式，因为在canvas里面可以直接画各种图形，我们可以在里面利用画线的方法，画出整个棋盘。主要要获取了画布之后再画图。
第三点：要想画出整个棋盘，那必须还有棋子，棋子这里使用的时现有的图片，我们就需要预加载所有的图片，这里非常重要的一点就是，在我们上一篇文章中提到的就是要等图片加载完全了，我们才能在画布上绘制，否则是绘制不出来的。
第四点：我们绘图要绘制在哪里呢？这点也是需要注意的，我这里采用的是预先设置的数组，然后保存好相对应的key键值，这样在我们加载完全了图片的时候我们就知道绘制的点是相应的键值的地方。
第五点：由于棋盘式绘制出来的，所以是均匀的，这里我们就要确定每个棋子具体的象素点是在哪里了，要预先设置要相应的X轴和Y轴的空间间距，反正我是多次试验得出的。~~~之后就可以直接在相应的键值上绘制图片了。~

一下附上我测试的代码，如有觉得不好，请尽管喷~！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 中国象棋</title>
<link href="CSS/zgxq.css" type="text/css" rel="stylesheet">
</head>

<body>
<div class="box" id="box">
	<div class="chess_left">
    	<canvas id="chess" width="540" height="600">
        对不起!您的浏览器不支持HTML5,请使用chrome 或火狐浏览器流浪！
        </canvas>
    </div>
    <script src="js/common.js"></script>
    <script src="js/play.js"></script>
</div>
</body>
</html>

<!doctype html>

<html>

<head>

</head>

<body>

对不起!您的浏览器不支持HTML5,请使用chrome 或火狐浏览器流浪！

</canvas>

</div>

</div>

</body>

</html>

// JavaScript Document

var com = com||{};
com.panel=function(){
	var canvas=document.getElementById("chess");

	var ctx=canvas.getContext("2d");
	
	// draw background
	ctx.fillStyle="#3C6"
	ctx.beginPath();
	ctx.rect(20,20,463.5,514.5);
	ctx.fill();
	ctx.closePath();
	// prepare to draw lines
	var p = 20,
		s = 57,
		w = 463,
		h = 514;
	ctx.strokeStyle="red";
	ctx.lineWidth=2;
	ctx.beginPath();
	// horizonal lines
	for(var i = 0; i<10; i++){
		ctx.moveTo(p, s * i + p);
		ctx.lineTo(w + p, s * i + p);
	}
//	// vertical lines
	ctx.moveTo(p, p);
	ctx.lineTo(p, h + p);
	ctx.moveTo(w + p, p);
	ctx.lineTo(w + p, h + p);
	for(var i = 1; i<8; i++){
		ctx.moveTo(s * i + p, p);
		ctx.lineTo(s * i + p, s * 4 + p);
		ctx.moveTo(s * i + p, s * 5 + p);
		ctx.lineTo(s * i + p, h + p);
	}
//	// "X" shapes
	ctx.moveTo(s * 3 + p, p);
	ctx.lineTo(s * 5 + p, s * 2 + p);
	ctx.moveTo(s * 5 + p, 0 + p);
	ctx.lineTo(s * 3 + p, s * 2 + p);
	ctx.moveTo(s * 3 + p, s * 7 + p);
	ctx.lineTo(s * 5 + p, s * 9 + p);
	ctx.moveTo(s * 5 + p, s * 7 + p);
	ctx.lineTo(s * 3 + p, s * 9 + p);

	ctx.stroke();
	ctx.closePath();

	// 楚河汉界
	ctx.font="Arial, Helvetica, sans-serif";
	ctx.fillStyle="#F30";
	ctx.textAlign="center";
	ctx.font = "20pt Calibri";
	ctx.fillText("楚河", p + s * 2, p + s * 4.6);
	ctx.fillText("漢界", p + s * 6, p + s * 4.6);
	};
	


com.init = function(stype){
	com.width = stype.width;	//画布宽度
	com.height = stype.height;	//画布高度
	
	com.canvas	= document.getElementById("chess");	//画布
	com.ct		= com.canvas.getContext("2d");
	com.ImgIsLoaded = false;
	//alert(com.ImgIsLoaded);
	com.loadImages(stype);
	}
	
window.onload = function(){
	
	com.panel();
	com.init("stype");
	if(com.ImgIsLoaded == true){
		alert(com.ImgIsLoaded);
		com.mans = {};	//棋子集合
		com.createMans(com.initMap);	//生成棋子
	}
	
}
	
//网页样式
com.stype = {
	stype:{
		width:325,
		height:402,
		spaceX:55,
		spaceY:55,
		pointStartX:0,
		pointStartY:0,
		page:"stype"
		}
	};

//载入图片
com.loadImages = function(stype){
	var num = 0;
	//棋子
	for(var i in com.args){
		com[i] = {};
		com[i].img = new Image();
		com[i].flag = false;
		com[i].img.src = "img/"+stype+"/"+com.args[i].img+".png";
		com[i].img.onload = function(){
				num++;
				alert(num);
				if (num == 14)
				{ 
					com.ImgIsLoaded = true;
					com.mans = {};	//棋子集合
					com.createMans(com.initMap);	//生成棋子
					alert("now"+num);
				}
			}
		}
};
	
com.args = {
	//红子 中文/图片地址/阵营/权重
	'c':{text:"车", img:'r_c', my:1, bl:"c"},
	'm':{text:"马", img:'r_m', my:1, bl:"m"},
	'x':{text:"相", img:'r_x', my:1, b1:'x'},
	's':{text:"仕", img:'r_s', my:1, bl:"s"},
	'j':{text:"将", img:'r_j', my:1, bl:"j"},
	'p':{text:"炮", img:'r_p', my:1, bl:"p"},
	'z':{text:"兵", img:'r_z', my:1, bl:"z"},
	
	//蓝子
	'C':{text:"車", img:'b_c', my:-1 ,bl:"c"},
	'M':{text:"馬", img:'b_m', my:-1 ,bl:"m"},
	'X':{text:"象", img:'b_x', my:-1 ,bl:"x"},
	'S':{text:"士", img:'b_s', my:-1 ,bl:"s"},
	'J':{text:"帅", img:'b_j', my:-1 ,bl:"j"},
	'P':{text:"炮", img:'b_p', my:-1 ,bl:"p"},
	'Z':{text:"卒", img:'b_z', my:-1 ,bl:"z"}
}

//棋盘地图	
com.initMap = [
	['C0','M0','X0','S0','J0','S1','X1','M1','C1'],
	[    ,    ,    ,    ,    ,    ,    ,    ,    ],
	[    ,'P0',    ,    ,    ,    ,    ,'P1',    ],
	['Z0',    ,'Z1',    ,'Z2',    ,'Z3',    ,'Z4'],
	[    ,    ,    ,    ,    ,    ,    ,    ,    ],
	[    ,    ,    ,    ,    ,    ,    ,    ,    ],
	['z0',    ,'z1',    ,'z2',    ,'z3',    ,'z4'],
	[    ,'p0',    ,    ,    ,    ,    ,'p1',    ],
	[    ,    ,    ,    ,    ,    ,    ,    ,    ],
	['c0','m0','x0','s0','j0','s1','x1','m1','c1']
];

com.createMans = function(map){
	for(var i=0;i<map.length;i++){
		for(var n=0;n<map[i].length;n++){
			var key = map[i][n];	//获取棋盘地图里面的标记位置
			if(key){
				//如果棋盘地图里面有标记，则绘制棋子
				com.mans[key] = new com.class.Man(key,n,i);
				com.mans[key].x = n;
				com.mans[key].y = i;
				}
			}
		}
		alert("this is createMans");
		
	}
com.class = com.class || {}	//类
com.class.Man = function(key,x,y){
	this.pater = key.slice(0,1);	//选取数组中的元素，从start到end也就是0到1
	var o = com.args[this.pater]; //取得此元素对象
	this.x = x || 0;
	this.y = y || 0;
	this.key = key;	//对应map棋盘里面的相应的值
	this.my = o.my;
	this.text = o.text;
	this.value = o.value;
	
	this.isShow = true;
	this.alpha = 1;
	this.ps = [];	//着点
	
	if(this.isShow){
		com.ct.save();
		com.ct.globalAlpha = this.alpha;
		alert();
		com.ct.drawImage(com[this.pater].img,com.stype.stype.spaceX*this.x+com.stype.stype.pointStartX,com.stype.stype.spaceY*this.y+com.stype.stype.pointStartY);
		com.ct.restore();
		}
	
}



com.arr2Clone = function(array){
	var newArray = [];
	for(var i = 0;i<array.length;i++){
		newArray[i] = array[i].slice();
		}
	return newArray;
	}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

// JavaScript Document

var com = com||{};

com.panel=function(){

var canvas=document.getElementById("chess");

var ctx=canvas.getContext("2d");

// draw background

ctx.fillStyle="#3C6"

ctx.beginPath();

ctx.rect(20,20,463.5,514.5);

ctx.fill();

ctx.closePath();

// prepare to draw lines

var p = 20,

s = 57,

w = 463,

h = 514;

ctx.strokeStyle="red";

ctx.lineWidth=2;

ctx.beginPath();

// horizonal lines

for(var i = 0; i<10; i++){

ctx.moveTo(p, s * i + p);

ctx.lineTo(w + p, s * i + p);

}

// // vertical lines

ctx.moveTo(p, p);

ctx.lineTo(p, h + p);

ctx.moveTo(w + p, p);

ctx.lineTo(w + p, h + p);

for(var i = 1; i<8; i++){

ctx.moveTo(s * i + p, p);

ctx.lineTo(s * i + p, s * 4 + p);

ctx.moveTo(s * i + p, s * 5 + p);

ctx.lineTo(s * i + p, h + p);

}

// // "X" shapes

ctx.moveTo(s * 3 + p, p);

ctx.lineTo(s * 5 + p, s * 2 + p);

ctx.moveTo(s * 5 + p, 0 + p);

ctx.lineTo(s * 3 + p, s * 2 + p);

ctx.moveTo(s * 3 + p, s * 7 + p);

ctx.lineTo(s * 5 + p, s * 9 + p);

ctx.moveTo(s * 5 + p, s * 7 + p);

ctx.lineTo(s * 3 + p, s * 9 + p);

ctx.stroke();

ctx.closePath();

// 楚河汉界

ctx.font="Arial, Helvetica, sans-serif";

ctx.fillStyle="#F30";

ctx.textAlign="center";

ctx.font = "20pt Calibri";

ctx.fillText("楚河", p + s * 2, p + s * 4.6);

ctx.fillText("漢界", p + s * 6, p + s * 4.6);

};

com.init = function(stype){

com.width = stype.width; //画布宽度

com.height = stype.height; //画布高度

com.canvas = document.getElementById("chess"); //画布

com.ct = com.canvas.getContext("2d");

com.ImgIsLoaded = false;

//alert(com.ImgIsLoaded);

com.loadImages(stype);

}

window.onload = function(){

com.panel();

com.init("stype");

if(com.ImgIsLoaded == true){

alert(com.ImgIsLoaded);

com.mans = {}; //棋子集合

com.createMans(com.initMap); //生成棋子

}

//网页样式

com.stype = {

stype:{

width:325,

height:402,

spaceX:55,

spaceY:55,

pointStartX:0,

pointStartY:0,

page:"stype"

}

};

//载入图片

com.loadImages = function(stype){

var num = 0;

//棋子

for(var i in com.args){

com[i] = {};

com[i].img = new Image();

com[i].flag = false;

com[i].img.src = "img/"+stype+"/"+com.args[i].img+".png";

com[i].img.onload = function(){

num++;

alert(num);

if (num == 14)

{

com.ImgIsLoaded = true;

com.mans = {}; //棋子集合

com.createMans(com.initMap); //生成棋子

alert("now"+num);

}

};

com.args = {

//红子中文/图片地址/阵营/权重

'c':{text:"车", img:'r_c', my:1, bl:"c"},

'm':{text:"马", img:'r_m', my:1, bl:"m"},

'x':{text:"相", img:'r_x', my:1, b1:'x'},

's':{text:"仕", img:'r_s', my:1, bl:"s"},

'j':{text:"将", img:'r_j', my:1, bl:"j"},

'p':{text:"炮", img:'r_p', my:1, bl:"p"},

'z':{text:"兵", img:'r_z', my:1, bl:"z"},

//蓝子

'C':{text:"車", img:'b_c', my:-1 ,bl:"c"},

'M':{text:"馬", img:'b_m', my:-1 ,bl:"m"},

'X':{text:"象", img:'b_x', my:-1 ,bl:"x"},

'S':{text:"士", img:'b_s', my:-1 ,bl:"s"},

'J':{text:"帅", img:'b_j', my:-1 ,bl:"j"},

'P':{text:"炮", img:'b_p', my:-1 ,bl:"p"},

'Z':{text:"卒", img:'b_z', my:-1 ,bl:"z"}

}

//棋盘地图

com.initMap = [

['C0','M0','X0','S0','J0','S1','X1','M1','C1'],

[ , , , , , , , , ],

[ ,'P0', , , , , ,'P1', ],

['Z0', ,'Z1', ,'Z2', ,'Z3', ,'Z4'],

[ , , , , , , , , ],

['z0', ,'z1', ,'z2', ,'z3', ,'z4'],

[ ,'p0', , , , , ,'p1', ],

[ , , , , , , , , ],

['c0','m0','x0','s0','j0','s1','x1','m1','c1']

];

com.createMans = function(map){

for(var i=0;i<map.length;i++){

for(var n=0;n<map[i].length;n++){

var key = map[i][n]; //获取棋盘地图里面的标记位置

if(key){

//如果棋盘地图里面有标记，则绘制棋子

com.mans[key] = new com.class.Man(key,n,i);

com.mans[key].x = n;

com.mans[key].y = i;

}

alert("this is createMans");

}

com.class = com.class || {} //类

com.class.Man = function(key,x,y){

this.pater = key.slice(0,1); //选取数组中的元素，从start到end也就是0到1

var o = com.args[this.pater]; //取得此元素对象

this.x = x || 0;

this.y = y || 0;

this.key = key; //对应map棋盘里面的相应的值

this.my = o.my;

this.text = o.text;

this.value = o.value;

this.isShow = true;

this.alpha = 1;

this.ps = []; //着点

if(this.isShow){

com.ct.save();

com.ct.globalAlpha = this.alpha;

alert();

com.ct.drawImage(com[this.pater].img,com.stype.stype.spaceX*this.x+com.stype.stype.pointStartX,com.stype.stype.spaceY*this.y+com.stype.stype.pointStartY);

com.ct.restore();

}

com.arr2Clone = function(array){

var newArray = [];

for(var i = 0;i<array.length;i++){

newArray[i] = array[i].slice();

}

return newArray;

}

^画※哲^

互联网让世界没有陌生人，只有还没认识的小伙伴～

Day: 2013/12/27

HTML5 绘制中国象棋棋盘棋子

一	二	三	四	五	六	日
« 11月				5月 »
						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