web 前端绘制折线_html5绘制折线图

html5绘制折线图详细代码

(function (){

window.addEventListener("load", function(){

var data = [100,-1000,0,700];

// 获取上下文

var a_canvas = document.getElementById('a_canvas');

var context = a_canvas.getContext("2d");

// 绘制背景

var gradient = context.createLinearGradient(0,0,0,300);

// gradient.addColorStop(0,"#e0e0e0");

//gradient.addColorStop(1,"#ffffff");

context.fillStyle = gradient;

context.fillRect(0,0,a_canvas.width,a_canvas.height);

// 描绘边框

var grid_cols = data.length + 1;

var grid_rows = 4;

var cell_height = a_canvas.height / grid_rows;

var cell_width = a_canvas.width / grid_cols;

context.lineWidth = 1;

context.strokeStyle = "#a0a0a0";

// 结束边框描绘

context.beginPat