用html5设置国际象棋棋盘,绘制国际象棋棋盘

绘制方块：

canvastest

canvas

//添加canvas标记,id相当于起名

var canv = document.getElementById("canvas");//通过getElementById获取画布对象canv

var ctx = canv.getContext("2d");//画布设置为2D，对象ctx就是我们的画布

ctx.fillStyle = "red";//定义填充颜色

ctx.fillRect(50,50,100,100);//绘制方块函数，参数分别表示左上角点屏幕xy坐标，以及方块的大小为100像素*100像素

image.png

绘制方框

ctx.strokeStyle = "Green";//设定线条颜色

ctx.lineWidth = 5;//设定线条宽

ctx.strokeRect(25,50,50,100);//绘制方框函数

image.png

绘制棋盘

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

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

ctx.strokeStyle = "Pink";

ctx.lineWidth = 4;

for(var j = 0;j <4;j ++)

{

for(var i = 0;i <4;i ++)

{

ctx.fillRect(i*80,j*80,40,40);

ctx.fillRect(i*80+40,j*80+40,40,40);

ctx.strokeRect(i*80+40,j*80,40,40);

ctx.strokeRect(i*80,j*80+40,40,40);

}

}

image.png