【绘制】HTML5 Canvas绘制坐标轴（图文、示例）

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

介绍

使用Canvas绘制具有x，y轴的直角坐标轴，并在轴上绘制相应的刻度条。

演示

在线演示

代码教程

通过常量来计算坐标轴属性，例如坐标轴宽高，刻度线间距等等，设置好这些属性后，剩余代码基本上都在按照beginPath()、moveTo()、lineTo()、stroke()的顺序绘制坐标轴和其刻度线。

所有的相关常量含义和方法说明都以注释的形式写在了代码之中。

详细代码