HTML5-canvas示例：2D折线数据图

基础知识：canvas＆gt;

在页面上创建一个canvas标签，然后获取canvas元素，因为它是一个2D绘图，所以调用.getContext（'2d'）2D图形方法

Var target=document.getElementById（'demo'），pic=target.getContext（'2d'）;

画布绘图的平面空间，空间的每个点都有自己的坐标，x代表横坐标，y代表垂直坐标。原点（0,0）位于图像的左上角，x轴的正方向是右边的原点，y轴的正方向是原点向下。

部分API的介绍：　

pic.beginPath（）; //创建一个开始绘制路径（每行需要重新创建一次，否则将来的操作[如填充颜色]将反映在此路径中）pic.moveTo（0,0）; //绘制起点pic.lineTo（100,100）; //设置绘图线的终点，你可以多次调用它（最后一个终点是起点，继续绘制）pic.lineTo（240,340）; pic.lineWidth=1; //设置宽度图片。 strokeStyle='＃259'; //设置颜色pic.stroke（）; //填写pic.closePath（）; //关闭此路径，可选

封装：

绘图路径必须知道起点坐标和终点坐标，因为它可能被绘制多次，因此您需要使用二维数组来保存每个坐标，例如[[0,0]，[100， 50]，[2,50]]，然后遍历二维数组并多次调用lineTo方法进行渲染。包功能如下：

//绘制线条函数drawContLine（opt）{pic.beginPath（）; var path=opt.path，//[[0,0]，[20,30] .] color=opt.color; pic.moveTo（路径[0] [0]，路径[0] [1]）; var n=1，len=path.length;为（; N

例子：月份成绩分数对比曲线图

完整代码：

DOCTYPE html＆gt; DOCUMENTTITLE＆GT;标签:＆amp; nbsp＆amp; nbsp沈阳网站建设＆amp; nbspMarketing 网站建设＆amp; nbsphtml5Development