用html编写一幅简单的画,使用html5画简单的折线图

//得到画布

var can1=document.getElementByIdx_x_x_x("can");

//得到画笔

var cxt=can1.getContext("2d");

//定义图表的数据，该方式为创建数组直接量的方式

var sale_data=[80,92,104,110,68,50,45,90,74,98,103];

//首先为背景进行设置渐变的效果,表示的是从(0,0)到(600,0)即纵坐标上边显示渐变的效果

var g=cxt.createLinearGradient(0,100);

g.addColorStop(0,"#e0e0e0");

g.addColorStop(1,"#ffffff");

//将渐变效果添加在我们的画布上边

cxt.fillStyle=g;

//开始绘制效果

cxt.fillRect(0,can1.width,can1.height);

//设置要绘制方格的行数和列数

var cols=sale_data.length+1;

var rows=4;

//计算每一个小方格的宽度和高度

var cell_width=can1.width/cols;

var cell_height=can1.height/rows;

//设置绘制的颜色

cxt.strokeStyle="#a0a0a0";

//调用绘制表格的函数

drawTable(sale_data);

//绘制表格的函数

function drawTable(data){

cxt.beginPath();

//开始画竖线

for(var i=0;i<=rows;i++){

//计算绘制的坐标

var heiy=cell_height*i;

cxt.moveTo(0,heiy);

cxt.lineTo(can.width,heiy);

}

//绘制横线

for(var j=0;j<=cols;j++){

//计算绘制的坐标

var widx=cell_width*j;

cxt.moveTo(widx,0);

cxt.lineTo(widx,can1.height);

}

//绘制表格完成

cxt.stroke();

//获取数据当中的最大值，以便可以划分纵坐标轴，来进行绘图，即每个像素代表的数值是多少，纵坐标的最大值

var max_val=0;

for(var i=0;i

if(max_val

max_val=data[i];

}

}

//之后我们对最大值再放大一点，作为坐标轴的最大值

max_val=max_val*1.1;

//现在我们计算每个数据的坐标轴

//这里我们将计算出来的坐标轴数据写入到我们的数组对象当中去

var points=[];

for(var i=0;i

var v=data[i];

var px=cell_width*(i+1);

var py=can1.height-can1.height*(v/max_val);

points.push({"x":px,"y":py});

}

//开始绘制折线

cxt.beginPath();

cxt.moveTo(points[0].x,points[0].y);

for(var j=1;j

cxt.lineTo(points[j].x,points[j].y);

}

cxt.strokeStyle="#ee0000";

cxt.stroke();

//绘制坐标的小圆点

for(var j in points){

var p=points[j];

cxt.beginPath();

cxt.arc(p.x,p.y,6,2*Math.PI);

cxt.fillStyle="#ee0000";

cxt.fill();

}

}

转自：http://blog.sina.com.cn/s/blog_7256fe8f010165cb.html