<body>
<canvas width="600" height="400" style="border-color: #eee"></canvas>
</body>
<script>
/*
默认的线条宽度1px
默认的颜色是黑色
产生的原因是
*/
//获取元素
var myCanvas=document.querySelector('canvas');
//获取上下文
var ctx=myCanvas.getContext('2d');
var grid=10;
var canvasHeight=ctx.canvas.height;//计算canvas画布的高度
var canvasWidth=ctx.canvas.width;//获取画布的宽度
var xLineNumber=Math.floor(canvasWidth/grid);//计算需要几条横线
var yLineNumber=Math.floor(canvasHeight/grid);//计算需要几条竖线
ctx.strokeStyle="#eee";
for(var i=0;i<xLineNumber;i++){//循环来画线
ctx.beginPath();
ctx.moveTo(i*grid,0);
ctx.lineTo(i*grid,canvasHeight);
ctx.stroke();
}
for(var i=0;i<yLineNumber;i++){
ctx.beginPath();
ctx.moveTo(0,i*grid);
ctx.lineTo(canvasWidth,i*grid);
ctx.stroke();
}
//绘制坐标轴
//1.绘制Y轴
var spance=20;
var arrowSize=10;
ctx.beginPath();
ctx.moveTo(spance,spance);
ctx.lineTo(spance,canvasHeight-spance);
ctx.strokeStyle="black";
ctx.stroke();
//2.绘制X轴
ctx.beginPath();
ctx.moveTo(spance,canvasHeight-spance);
ctx.lineTo(canvasWidth-spance,canvasHeight-spance);
ctx.stroke();
//3.绘制X轴的箭头
ctx.moveTo(canvasWidth-spance,canvasHeight-spance-5);
ctx.lineTo(canvasWidth-spance,canvasHeight-spance+5);
ctx.lineTo(canvasWidth-spance+10,canvasHeight-spance);
ctx.closePath();
ctx.fill();
//绘制Y轴箭头
ctx.moveTo(spance-5,spance);
ctx.lineTo(spance+5,spance);
ctx.lineTo(spance,spance-10);
ctx.closePath();
ctx.fill();
</script>