效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./arrow.js"></script>
</head>
<body>
<canvas id="chess" width="1300" height="800"></canvas>//绘制区域
<script type="text/javascript">
var cols = [0,1,2,3,4,5,6];//纵坐标
var rows = [0,1,2,3,4,5,6];//横坐标
var step = 50;//像素跨度
var h = 50;//margin-top
var l = 50;//margin-left
function draw(){
var c = document.getElementById("chess");
var cxt = c.getContext('2d');//获取一个画笔
cxt.font = "bold 13px Arial";//画笔样式
for(var i=0;i<7;i++){
cxt.fillText(cols[i],l+i*step,h-10);//绘制横坐标：文字，x轴,y轴
}
for(var i=0;i<7;i++){
cxt.fillText(rows[i],l-20,step*i+h+5);//绘制纵坐标
}
cxt.beginPath();
for(var i=0;i<7;i++){//绘制行
cxt.moveTo(l,i*step+h);//移动
cxt.lineTo(step*6+l,i*step+h);//画线
}
for(var i=0;i<7;i++){//绘制列
cxt.moveTo(l+i*step,h);//移动
cxt.lineTo(l+i*step,step*6+h);//画线
}
cxt.closePath();//闭环
cxt.stroke();//绘制
}
draw();
</script>
</body>
</html>
542
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
