學習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();

總結

以上是生活随笔為你收集整理的html画布创建黑白象棋棋盘,Canvas绘制象棋棋盘的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。