学习Canvas可以通过一些例子来增加成就感
一下是一个输出一个象棋棋盘的例子
象棋棋盘
<html>
<body>
<canvas id="canvas1" width="560" height="620"></canvas>
<script type="text/javascript">
//以要画的点为原点定义四个象限
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 <pointInfo.length; 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 <points.length; 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();
</script>
</body>
</html>
