本文主要包含html5,绘制折线图,折线图等相关知识,佚名 希望在学习及工作中可以帮助到您
- <html>
- <canvas id="a_canvas" width="1000" height="700"></canvas>
- <script>
- (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.beginPath();
- // 准备画横线
- /*for (var col = 0; col <= grid_cols; col++) {
- var x = col * cell_width;
- context.moveTo(x,0);
- context.lineTo(x,a_canvas.height);
- }
- // 准备画竖线
- for(var row = 0; row <= grid_rows; row++){