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