h5c3-day08

js 的Math库，自带了许多常见函数方法，其中关于 三角函数的求解还是很齐全的，于是想到，利用canvas 绘制一个比较准确的 sin、cos、tan、sinh、cosh、tanh图像。

canvas绘制坐标轴

坐标轴由两条直线构成，直接将坐标定在中心点就好，这样容易绘制。同时为坐标的箭头定义边长。

绘制坐标轴上的尺度和文字

思路：将坐标轴线的长度平均分割，分别定义好x轴和y轴每个尺度的对应值。 
这其中，sin，cos和tan的图一般都是以π作为单位，且π/2也做标注，故画需要对每个单元格进行更细小的划分，按更小的单位进行循环绘制。类似直尺上的毫米，一毫米一毫米绘制，每十毫米满一个单元时，其标尺标记更长一些，以示区分。

为灵活展示每个单元的更细小划分情况，应允许传入一个单元的拆分数，用来展示更小单位下的尺度。如一厘米=10毫米，即拆分为10份。

对sin、cos、tan 来说，需要展示标注文字和标尺：1π/2，3π/2，则每个单元应拆分为2份。 
但对sinh、cosh、tanh 来说，x、y轴上都不需要展示1/2,1/3的标注文字，也不需要展示特别细小的尺寸。份数可设置为1。

其实，这只是因为过小的尺寸不好标注文字。限制每多少个小单位标注文字即可。

当线宽为奇数，绘制坐标是整数时，那么无论如何，线条的矩形区域都坐标都多出0.5像素，于是补满，整体多出了1像素。
当线宽为偶数，绘制坐标是整数时，那么无论如何，画笔中线总是对齐坐标的，线条宽度不会产生偏差。
当线宽有小数，绘制坐标是整数时，那么无论如何，线条的矩形区域都坐标都存在小数，于是补满。整体也会多出1像素。
如： 
当画笔线宽为1px，那么绘制直线L:(0,0),(100,0)时，画笔对齐 y 坐标 = 0。由于线宽的存在，实际绘制线条有一半线宽在y的负半轴。导致不可见。 
那么线条矩形区域为：

Rect（left:0,top:-0.5,right:100;bottom:0.5）

0.5像素不可见，加满1像素，实际线条区域变为：

Rect（left:0,top:-1,right:100;bottom:1）

就变2px那么大了。

解决这个问题，我们只需要将线条的y坐标偏移0.5就行： 
L:(0,0.5),(100,0.5) 
当画笔中线对齐y坐标=0.5，时，线条矩形区域没有多余小数：

Rect(left:0,top:0,right:100,1)

这样，自然就是真的1px线条了。

综上，线宽为偶数不会产生误差，而线宽为小数，本来就无法准确绘制，不用处理了。

所以绘制时，我们只需要修正线宽为奇数的情况就行。甚至，只修复线宽1px的情况就可以，因为当线宽很大时，肉眼感知不到啊。

var fix1px = (cxt.lineWidth % 2 === 0) ?0: 0.5;

纵向线条，x坐标偏移： 
x = x+fix1px ;

横向线条，y坐标偏移： 
y = y+fix1px ;】

    描边的颜色默认为黑色
    描边的宽度大小：默认1px
    产生的原因：对齐的点是线的中心位置，浏览器会把线分成上下两个0.5px,但是浏览器又不会解析0.5px，所以就默认的显示1px，最终给用户看到的线2px，所以颜色显示的也是不饱和的。
    解决方案：向上，或者向下平移0.5px

     非0环绕：
      1.在区域中添加一条射线
      2. 看这条射线和轨迹的交点  规定顺时针为+1，逆时针为-1 ，算出交点的和
      3. 如果交点结果=0，表明这个区域在里面，不填充颜色
            交点结果不为0，在外边，填充颜色