在页面上创建canvas标签,然后获取canvas这个元素,因为是画2D图,所以是调用.getContext('2d') 二维图方法
canvas作图的平面空间,该空间的每个点都有自己的坐标,x表示横坐标,y表示竖坐标。原点(0, 0)位于图像左上角,x轴的正向是原点向右,y轴的正向是原点向下。
部分API的介绍:
封装:
描绘路径必需知道起点坐标与终点坐标,因为可能是多次描绘,所以就需要用到二维数组把各个坐标保存下来,如[ [0,0],[100,50],[2,50] ],然后遍历二维数组,多次调用lineTo方法进行描绘。封装函数如下:
例子:月份成绩分数对比曲线图

完整代码:
?扇形图:
arc方法的x和y参数是圆心坐标,radius是半径,startAngle和endAngle则是扇形的起始角度和终止角度(以弧度表示,Math.PI*2表示360度),anticlockwise表示做图时应该逆时针画(true)还是顺时针画(false)
例子:
--------------------------------------分割线 --------------------------------------
--------------------------------------分割线 --------------------------------------