#c1{
border:1pxsolidblack;
}
window.οnlοad=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
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
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()
}