canvas绘制坐标轴

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            text-align: center;
        }

        canvas {
            background: #ddd;
        }
    </style>
</head>
<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();

    ctx.moveTo(20,350);//移端点
    ctx.lineTo(200,20);
    // context.setLineDash([10,15]);//(1参)10虚线长度；(2)15这根线和下个线的距离;
    ctx.stroke();
</script>
</html>
下面绘制一条起点是(50,50)，终点是(150,150)的直线线条
context.moveTo(50, 50);
context.lineTo(150, 150);
context.stroke();