web 前端绘制折线_前端---HTML5如何制作一个折线图

在学习如何制作折线图,我们先学习一下canvas元素中CanvasRenderingContext2D对象提供的相关方法,通过使用坐标表换,开发者无须繁琐计算每个点的坐标,只需对坐标系整体表换即可.

CanvasRenderingContext2D提供了如下的方法进行坐标变换:

translate(double dx,double dy):平移坐标系统.该方法相当于把原来位于(0,0)位置的坐标远点平移到(dx,dy)点.在平移后的坐标系统上绘制图形时,所有坐标点的X坐标都相当于增加了dx,所有点的Y坐标都相当于增加了dy.

scale(double sx,double sy):缩放坐标系统.该方法控制坐标系统水平方向上缩放sx,垂直方向上缩放sy.在缩放后的坐标系统上绘制图形时,所有有坐标点的X坐标都相当与乘以了sx因子,所有点的Y坐标都相当于乘以了sy因子.

rotate(double angle):旋转坐标系统.该方法控制系统旋转angle弧度.在旋转后的坐标系统上绘制图形时,所有坐标点的X,Y坐标都相当于旋转了angle弧度之后的坐标.

transform(double m11,double m12,double m22,double dx,double dy):对当前坐标系统执行矩阵变换.

并且还提供了如下两个方法来保存,恢复绘图状态:

save():保存当前的绘图状态.

restore():恢复之前保存的绘图状态.

折线图的代码及示意图如下:

折线图

折线图

var canvas=document.getElementById('mc');

var ctx=canvas.getContext('2d');

ctx.beginPath();

//坐标轴

ctx.moveTo(30,20);

ctx.lineWidth="1";