Canvas Grids 的简单实现

下面的代码在HTML Canvas中绘制了坐标轴及坐标格线Grids。

    
        
        
        
        
        
    
    
        
Canvas Grid
        
        Not supported!
    

便可绘制出：

前面的变量可用于定制诸如标尺长度、Grids的大小、箭头夹角、箭头长度等。

Canvas没有指定宽度与高度，而是自动铺满整个浏览器的客户区域，然后再根据其宽度及高度画满Grids.  因此，当浏览器大小改变时，只要刷新网页，就能自动绘制出最大化的Grids.

因为要在Canvas中为绘制坐标轴及坐标刻度标签留出空间，因此在绘制坐标轴后，调用Canvas绘制命令时的坐标值与原坐标值便不再一样。为方便地调用所有后续绘制命令，特在init()函数中统一进行坐标偏移变换，而在doDrawing()函数中，根本无需考虑坐标偏移的情况，只需简单地依照坐标轴及Grids指定坐标值就行了。

使用此应用，可方便地在Canvas中精准定位，绘制出自己的图形后，如果需要，可将init()函数中的drawXAxis(), drawYAxis(), drawGrids()函数调用屏蔽掉，这样就可保存一份干净的绘制图形。