html 怎么绘制曲线图,用html5绘制折线图的实例代码_html5教程技巧

用html5绘制折线图的实例代码_html5教程技巧

canvas>

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

//