09-canvas绘制坐标系

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>09-Canvas绘制坐标系</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         canvas{
12             display: block;
13             margin: 0 auto;
14             background: red;
15         }
16     </style>
17 </head>
18 <body>
19 <canvas width="500" height="400"></canvas>
20 <script>
21     // 1.拿到canvas
22     let oCanvas = document.querySelector("canvas");
23     // 2.从canvas中拿到绘图工具
24     let oCtx = oCanvas.getContext("2d");
25     // 3.定义变量保存小方格的尺寸
26     let gridSize = 50;
27     // 4.拿到canvas的宽高
28     let canvasWidth = oCtx.canvas.width;
29     let canvasHeight = oCtx.canvas.height;
30     // 5.计算在垂直方向和水平方向可以绘制多少条横线
31     let row = Math.floor(canvasHeight / gridSize);
32     let col = Math.floor(canvasWidth / gridSize);
33     // 6.绘制垂直方向的横线
34     for(let i = 0; i < row; i++){
35         oCtx.beginPath();
36         oCtx.moveTo(0, i * gridSize - 0.5);
37         oCtx.lineTo(canvasWidth, i * gridSize - 0.5);
38         oCtx.strokeStyle = "#ccc";
39         oCtx.stroke();
40     }
41     // 7.绘制水平方向的横线
42     for(let i = 0; i < col; i++){
43         oCtx.beginPath();
44         oCtx.moveTo(i * gridSize - 0.5, 0);
45         oCtx.lineTo(i * gridSize - 0.5, canvasHeight);
46         oCtx.strokeStyle = "#ccc";
47         oCtx.stroke();
48     }
49 
50     // 1.计算坐标系原点的位置
51     let originX = gridSize;
52     let originY = canvasHeight - gridSize;
53     // 2.计算X轴终点的位置
54     let endX = canvasWidth - gridSize;
55     // 3.绘制X轴
56     oCtx.beginPath();
57     oCtx.moveTo(originX, originY);
58     oCtx.lineTo(endX, originY);
59     oCtx.strokeStyle = "#000";
60     oCtx.stroke();
61     // 4.绘制X轴的箭头
62     oCtx.lineTo(endX - 10, originY + 5);
63     oCtx.lineTo(endX - 10, originY - 5);
64     oCtx.lineTo(endX, originY);
65     oCtx.fill();
66 
67     // 5.计算Y轴终点的位置
68     let endY = gridSize;
69     // 3.绘制Y轴
70     oCtx.beginPath();
71     oCtx.moveTo(originX, originY);
72     oCtx.lineTo(originX, endY);
73     oCtx.strokeStyle = "#000";
74     oCtx.stroke();
75     // 4.绘制X轴的箭头
76     oCtx.lineTo(originX - 5, endY + 10);
77     oCtx.lineTo(originX + 5, endY + 10);
78     oCtx.lineTo(originX, endY);
79     oCtx.fill();
80 </script>
81 </body>
82 </html>