<!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();