<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>网格</title>
<style>
#c1{
border:1pxsolidblack;
}
</style>
<script>
window.onload=function(){
varoCanvas=document.getElementById('c1')
vargd=oCanvas.getContext('2d')
//你要画一个表格：
//你得思考，每个格子多大！
varspace=20
//1,得到画布的宽和高
varcWidth=gd.canvas.width;
varcHeight=gd.canvas.height;
//当你记不住api的时候，就打印出来看看！
varlines=Math.floor(cHeight/space)
varcols=Math.floor(cWidth/space)
for(leti=0;i<lines;i++){
gd.beginPath()
gd.moveTo(0,space*i-0.5)
gd.lineTo(cWidth,space*i-0.5)
gd.strokeStyle='#aaa'
gd.stroke();
}
//画第二个竖着的格子！
for(letj=0;j<cols;j++){
gd.beginPath();
gd.moveTo(space*j-0.5,0)
gd.lineTo(space*j-0.5,cHeight)
gd.strokeStyle="#aaa"
gd.stroke()
}
//下面是画那个坐标！
//1,everPadding（坐标离网格边界的上下左右的距离！）
vareverPadding=40
//起点(坐标原点)
varx0=everPadding;
varyo=cHeight-everPadding
//x轴，终点：
varx1=cWidth-everPadding;
//竖着方向：
//画着再说：
gd.beginPath();
gd.moveTo(x0,yo)
gd.lineTo(x1,yo)
gd.lineTo(x1-space,yo-space)
gd.lineTo(x1-space,yo+space)
gd.lineTo(x1,yo)
gd.strokeStyle="red"
gd.fillStyle="red"
gd.stroke()
gd.fill()
gd.beginPath()
gd.moveTo(x0,yo)
gd.lineTo(x0,everPadding)
gd.lineTo(x0-space,everPadding+space)
gd.lineTo(x0+space,everPadding+space)
gd.lineTo(x0,everPadding)
gd.strokeStyle="red"
gd.fillStyle="red"
gd.stroke()
gd.fill()
}
</script>
</head>
<body>
<canvasid="c1"width="500"height="500"></canvas>
</body>
</html>
本文转载自中文网
本文转载自中文网
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h54685.shtml
