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";

ctx.lineTo(30,380);

ctx.lineTo(400,380);

//ctx.closePath();

//横线

ctx.strokeStyle="#999";

for(var i=0;i<7;i++)

{

ctx.moveTo(30,30+50*i);

ctx.lineTo(400,30+50*i);

}

//折线

ctx.moveTo(100,300);

ctx.lineTo(200,200);

ctx.lineTo(280,280);

ctx.lineTo(380,30);

ctx.stroke();

我们直接看代码里面body部分,首先我们创建一个canvas画布,定义了它的长,宽.然后在******中插入js代码,先采用var来定义一个实例,用document.getElementById();方法来与之前定义的canvas画布进行绑定在一起.

首先编写"ctx.beginPath();"来开始一段绘制的开始;

ctx.moveTo(30,20);                       //使用moveto方法将坐标原点移动到(30,20);

ctx.lineWidth="1";                         //使用linewidth方法将线的宽度设为1px;

ctx.lineTo(30,380);                        //使用lineto将(30,20)和(30,80)的线连接在一起

ctx.lineTo(400,380);                      //再将(30,20)和(400,380)的线连接在一起

剩余的其他方法如上面解释一样.