Canvas 实现表格内的折线图

来源：互联网发布：怎样快速提高淘宝等级编辑：程序博客网时间：2024/06/06 03:54

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Canvas</title></head><body><div id="container"><canvas id="cavsElem">你的浏览器不支持canvas</canvas></div><script>(function(){var canvas = document.querySelector('#cavsElem');var ctx = canvas.getContext('2d');var rows = 60,columns = 90,rectSize = 10;//定义表格的行数列数，还有一个格子的高度canvas.width = 900;canvas.height = 600;canvas.style.border = "1px solid #000";ctx.beginPath();//绘制所有的行for(var i=0; i<rows; i++) {ctx.moveTo(0,i*rectSize);ctx.lineTo(columns*rectSize , i*rectSize);}//绘制所有的列for(var i=0; i<columns; i++) {ctx.moveTo(i*rectSize,0);ctx.lineTo(i*rectSize,rows*rectSize );}ctx.strokeStyle = "#f4f4f4";ctx.lineWidth = .5;ctx.stroke();//折线的点数据， 最大是100.var data = [30, 48, 50, 60, 50, 40, 20, 60, 80, 60];var x0 = 150, y0 = 500;var maxWidth = 500;var maxHeight = 300;var arrowWidth = 10;ctx.beginPath();//绘制 x轴ctx.moveTo(x0, y0);ctx.lineTo(x0 + maxWidth, y0);ctx.lineTo(x0 + maxWidth - arrowWidth, y0 - arrowWidth);ctx.moveTo(x0 + maxWidth, y0);ctx.lineTo(x0 + maxWidth - arrowWidth, y0 + arrowWidth);//绘制y轴ctx.moveTo(x0, y0);ctx.lineTo(x0, y0 - maxHeight);ctx.lineTo( x0 - arrowWidth, y0 - maxHeight + arrowWidth);ctx.moveTo(x0, y0 - maxHeight);ctx.lineTo( x0 + arrowWidth, y0 - maxHeight + arrowWidth);ctx.strokeStyle = "purple";ctx.lineWidth = 2;ctx.stroke();//获取每一个点的坐标，存到数组里面var points = [];var w = maxWidth / data.length;var h = maxHeight / 100;for(var i=1; i<=data.length; i++){points.push({x: i * w + x0,y: (y0 - data[i] * h)});//数组存入一个对象包含坐标的}//利用数组里面的点，链接起来ctx.beginPath();ctx.moveTo(x0, y0);for(var i=0; i<points.length; i++){ctx.lineTo(points[i].x, points[i].y);}ctx.strokeStyle = "red";ctx.lineWidth = 1;ctx.stroke();}());</script></body></html>

//运行后的效果图为：

是

阅读全文

0 0