用用html5绘制折线图的实例代码绘制折线图的实例代码
下面小编就为大家带来一篇用html5绘制折线图的实例代码。小编觉得挺不错的，现在分享给大家。也给大家一
个参考。一起跟随小编过来看看吧
XML/HTML Code复制内容到剪贴板
1. <html>
2. <canvas id="a_canvas" width="1000" height="700"></canvas>
3. <script>
4.
5. (function (){
6.
7. window.addEventListener("load", function(){
8.
9. var data = [100,-1000,0,700];
10.
11. // 获取上下文
12. var a_canvas = document.getElementById('a_canvas');
13. var context = a_canvas.getContext("2d");
14.
15.
16. // 绘制背景
17. var gradient = context.createLinearGradient(0,0,0,300);
18.
19.
20. // gradient.addColorStop(0,"#e0e0e0");
21. //gradient.addColorStop(1,"#ffffff");
22.
23.
24. context.fillStyle = gradient;
25.
26. context.fillRect(0,0,a_canvas.width,a_canvas.height);
27.
28.
29. // 描绘边框
30. var grid_cols = data.length + 1;
31. var grid_rows = 4;
32. var cell_height = a_canvas.height / grid_rows;
33. var cell_width = a_canvas.width / grid_cols;
34. context.lineWidth = 1;
35. context.strokeStyle = "#a0a0a0";
36.
37. // 结束边框描绘
38. context.beginPath();
39. // 准备画横线
40. /*for (var col = 0; col <= grid_cols; col++) {
41. var x = col * cell_width;
42. context.moveTo(x,0);
43. context.lineTo(x,a_canvas.height);
44. }
45. // 准备画竖线
46. for(var row = 0; row <= grid_rows; row++){
47. var y = row * cell_height;
48. context.moveTo(0,y);
49. context.lineTo(a_canvas.width, y);
50. }*/
51. //划横线
52. context.moveTo(0,a_canvas.height/2);
53. context.lineTo(a_canvas.width,a_canvas.height/2);
54.
55. //画竖线
56. context.moveTo(0,0);
57. context.lineTo(0,a_canvas.height);
58.
59.
60. context.lineWidth = 1;
评论0