学习Canvas可以通过一些例子来增加成就感

一下是一个输出一个象棋棋盘的例子

象棋棋盘

//以要画的点为原点定义四个象限

var pointDefine=[[-1,-1],[1,-1],[-1,1],[1,1]];

//要绘制标记方位 全部

var allP =[0,1,2,3];

//要绘制标记方位 左侧

var leftP =[1,3];

//要绘制标记方位 右侧

var rightP =[0,2];

var cl = 70;

/**

* 炮和兵位置信息

* 每一组位置信息为，横向位置，纵向位置，纵向位置上与之相对应的点的距离，要绘制标记方位(左侧还是右侧还是全部)

*/

var points=[

[0,3,3,leftP],

[8,3,3,rightP],

[2,3,3,allP],

[4,3,3,allP],

[6,3,3,allP],

[1,2,5,allP],

[7,2,5,allP]

];

var pointPlace = function (ctx,x,y,pointInfo){

var l = 10;

var space = 3;

for ( var i = 0; i

var xinfo = pointDefine[pointInfo[i]][0];

var yinfo = pointDefine[pointInfo[i]][1];

ctx.moveTo(x+xinfo*space,y+yinfo*l);

ctx.lineTo(x+xinfo*space,y+yinfo*space);

ctx.lineTo(x+xinfo*l,y+yinfo*space);

}

}

var drawX = function (ctx,x,y){

ctx.moveTo((x-1)*cl,(y-1)*cl);

ctx.lineTo((x+1)*cl,(y+1)*cl);

ctx.moveTo((x+1)*cl,(y-1)*cl);

ctx.lineTo((x-1)*cl,(y+1)*cl);

}

var drawProitPare = function (ctx,x,y,cl){

pointPlace(ctx,x,y,allP);

pointPlace(ctx,x,y +cl*5,allP);

}

var drawProitPare = function (ctx,x,y,yplus,cl,pointP){

pointPlace(ctx,cl*x,cl*y,pointP);

pointPlace(ctx,cl*x,cl*y +cl*yplus,pointP);

}

/**

* 画象棋棋盘

*/

var drawTable = function(ctx){

for(var clo = 0;clo<8 ;clo++){

for(var ln = 0;ln<9 ;ln++){

if(ln!=4){

ctx.strokeRect(clo*cl,ln*cl,cl,cl);

}else{

ctx.strokeRect(0,ln*cl,cl*8,cl);

}

}

ctx.strokeRect(0,0,560,620);

}

}

var canvas1 = document.getElementById("canvas1");

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

//设置线宽 线的颜色

ctx.lineWidth = 1;

ctx.strokeStyle = "dodgerblue";

drawTable(ctx);

var ctx2 = canvas1.getContext("2d");

drawX(ctx2,4,1);

drawX(ctx2,4,8);

for(var i = 0; i

drawProitPare(ctx2,points[i][0],points[i][1],points[i][2],cl,points[i][3]);

}

ctx2.strokeStyle = "dodgerblue";

ctx2.font='bolder 48px 隶书';

ctx2.rotate(90 * Math.PI/180)

ctx2.strokeText("汉",cl*4+10,-485);

ctx2.strokeText("界",cl*4+10,-435);

ctx2.rotate(-180 * Math.PI/180)

ctx2.strokeText("楚",-(cl*5-10),70);

ctx2.strokeText("河",-(cl*5-10),120);

ctx2.stroke();