1. 1 <!DOCTYPE html>
  2. 2 <html lang="en">
  3. 3 <head>
  4. 4 <meta charset="UTF-8">
  5. 5 <title>11-Canvas绘制折线图</title>
  6. 6 <style>
  7. 7 *{
  8. 8 margin: 0;
  9. 9 padding: 0;
  10. 10 }
  11. 11 canvas{
  12. 12 display: block;
  13. 13 margin: 0 auto;
  14. 14 background: red;
  15. 15 }
  16. 16 </style>
  17. 17 </head>
  18. 18 <body>
  19. 19 <canvas width="500" height="400"></canvas>
  20. 20 <script>
  21. 21 // 1.拿到canvas
  22. 22 let oCanvas = document.querySelector("canvas");
  23. 23 // 2.从canvas中拿到绘图工具
  24. 24 let oCtx = oCanvas.getContext("2d");
  25. 25 // 3.定义变量保存小方格的尺寸
  26. 26 let gridSize = 50;
  27. 27 // 4.拿到canvas的宽高
  28. 28 let canvasWidth = oCtx.canvas.width;
  29. 29 let canvasHeight = oCtx.canvas.height;
  30. 30 // 5.计算在垂直方向和水平方向可以绘制多少条横线
  31. 31 let row = Math.floor(canvasHeight / gridSize);
  32. 32 let col = Math.floor(canvasWidth / gridSize);
  33. 33 // 6.绘制垂直方向的横线
  34. 34 for(let i = 0; i < row; i++){
  35. 35 oCtx.beginPath();
  36. 36 oCtx.moveTo(0, i * gridSize - 0.5);
  37. 37 oCtx.lineTo(canvasWidth, i * gridSize - 0.5);
  38. 38 oCtx.strokeStyle = "#ccc";
  39. 39 oCtx.stroke();
  40. 40 }
  41. 41 // 7.绘制水平方向的横线
  42. 42 for(let i = 0; i < col; i++){
  43. 43 oCtx.beginPath();
  44. 44 oCtx.moveTo(i * gridSize - 0.5, 0);
  45. 45 oCtx.lineTo(i * gridSize - 0.5, canvasHeight);
  46. 46 oCtx.strokeStyle = "#ccc";
  47. 47 oCtx.stroke();
  48. 48 }
  49. 49
  50. 50 // 1.计算坐标系原点的位置
  51. 51 let originX = gridSize;
  52. 52 let originY = canvasHeight - gridSize;
  53. 53 // 2.计算X轴终点的位置
  54. 54 let endX = canvasWidth - gridSize;
  55. 55 // 3.绘制X轴
  56. 56 oCtx.beginPath();
  57. 57 oCtx.moveTo(originX, originY);
  58. 58 oCtx.lineTo(endX, originY);
  59. 59 oCtx.strokeStyle = "#000";
  60. 60 oCtx.stroke();
  61. 61 // 4.绘制X轴的箭头
  62. 62 oCtx.lineTo(endX - 10, originY + 5);
  63. 63 oCtx.lineTo(endX - 10, originY - 5);
  64. 64 oCtx.lineTo(endX, originY);
  65. 65 oCtx.fill();
  66. 66
  67. 67 // 5.计算Y轴终点的位置
  68. 68 let endY = gridSize;
  69. 69 // 3.绘制Y轴
  70. 70 oCtx.beginPath();
  71. 71 oCtx.moveTo(originX, originY);
  72. 72 oCtx.lineTo(originX, endY);
  73. 73 oCtx.strokeStyle = "#000";
  74. 74 oCtx.stroke();
  75. 75 // 4.绘制X轴的箭头
  76. 76 oCtx.lineTo(originX - 5, endY + 10);
  77. 77 oCtx.lineTo(originX + 5, endY + 10);
  78. 78 oCtx.lineTo(originX, endY);
  79. 79 oCtx.fill();
  80. 80
  81. 81 // 1.拿到服务器返回数据
  82. 82 let list = [
  83. 83 {
  84. 84 x: 100,
  85. 85 y: 300
  86. 86 },
  87. 87 {
  88. 88 x: 200,
  89. 89 y: 200
  90. 90 },
  91. 91 {
  92. 92 x: 300,
  93. 93 y: 250
  94. 94 },
  95. 95 {
  96. 96 x: 400,
  97. 97 y: 100
  98. 98 },
  99. 99 ];
  100. 100 let dotSize = 20;
  101. 101 // 2.绘制数据点
  102. 102 for(let i = 0; i < list.length; i++){
  103. 103 oCtx.beginPath();
  104. 104 oCtx.moveTo(list[i].x - dotSize / 2, list[i].y - dotSize / 2);
  105. 105 oCtx.lineTo(list[i].x + dotSize - dotSize / 2, list[i].y - dotSize / 2);
  106. 106 oCtx.lineTo(list[i].x + dotSize - dotSize / 2, list[i].y + dotSize - dotSize / 2);
  107. 107 oCtx.lineTo(list[i].x - dotSize / 2, list[i].y + dotSize - dotSize / 2);
  108. 108 oCtx.closePath();
  109. 109 oCtx.fill();
  110. 110 }
  111. 111
  112. 112 // 1.绘制折线
  113. 113 oCtx.beginPath();
  114. 114 for(let i = 0; i < list.length; i++){
  115. 115 if(i === 0){
  116. 116 oCtx.moveTo(list[i].x, list[i].y);
  117. 117 }else{
  118. 118 oCtx.lineTo(list[i].x, list[i].y);
  119. 119 }
  120. 120 }
  121. 121 oCtx.strokeStyle = "blue";
  122. 122 oCtx.stroke();
  123. 123 </script>
  124. 124 </body>
  125. 125 </html>

11-canvas绘制折线图的更多相关文章

  1. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Android自己定义组件系列【9】——Canvas绘制折线图

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了非常多插件,可是非常多时候我们须要依据详细项目自己定义这些图表,这一篇文章我们一起来看看怎样在Android中使用Can ...

  3. Android自定义控件 -Canvas绘制折线图(实现动态报表效果)

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...

  4. Android自定义组件系列【9】——Canvas绘制折线图

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...

  5. canvas绘制折线图

    效果图: 重难点: 1.画布左上角的顶点的坐标为(0 ,0),右下角的坐标最大,与平常思维相反 2.数据的处理 html代码: <!DOCTYPE html><html lang=& ...

  6. canvas绘制折线图(仿echarts)

    遇到的问题:Retina屏上字体线条模糊问题 解决方案:放大canvas的大小,然后用css压缩回原大小,例如:想要900*400的画布,先将画布设置为 width="1800px" ...

  7. 【带着canvas去流浪】(2)绘制折线图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 3.1 一般折线图 3.2 用贝塞尔曲线绘制平滑折线图 四. 大数据量场景 示例代码托管在:https://github.com/dashnowo ...

  8. 带着canvas去流浪系列之二 绘制折线图

    [摘要] 用canvasAPI实现echarts简易图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...

  9. 【Canvas】(2)---绘制折线图

    绘制折线图 之前在工作的时候,用过百度的ECharts绘制折线图,上手很简单,这里通过canvas绘制一个简单的折线图.这里将一整个绘制过程分为几个步骤: 1.绘制网格 2.绘制坐标系 3.绘制点 4 ...

  10. php中用GD绘制折线图

    php中用GD绘制折线图,代码如下: Class Chart{ private $image; // 定义图像 private $title; // 定义标题 private $ydata; // 定 ...

随机推荐

  1. .NET 个人博客-添加RSS订阅功能

    个人博客-添加RSS订阅功能 前言 个人博客系列已经完成了 留言板 文章归档 推荐文章优化 推荐文章排序 博客地址:https://pljzy.top 然后博客开源的原作者也是百忙之中添加了一个名为R ...

  2. hive第一课:Hive3.1.2概述与基本操作

    Hive3.1.2概述与基本操作 1.Hive基本概念 1.1 Hive简介 Hive本质是将SQL转换为MapReduce的任务进行运算,底层由HDFS来提供数据存储,说白了hive可以理解为一个将 ...

  3. FFmpeg开发笔记(三十四)Linux环境给FFmpeg集成libsrt和librist

    ​<FFmpeg开发实战:从零基础到短视频上线>一书的"10.2  FFmpeg推流和拉流"提到直播行业存在RTSP和RTMP两种常见的流媒体协议.除此以外,还有比较两 ...

  4. Xilinx XCZU7EV评估板规格书(四核ARM Cortex-A53 + 双核ARM Cortex-R5 + FPGA,主频1.5GHz)

    1 评估板简介 创龙科技TLZU-EVM是一款基于Xilinx UltraScale+ MPSoC系列XCZU7EV高性能处理器设计的高端异构多核SoC评估板,处理器集成PS端(四核ARM Corte ...

  5. python rsa加密

    rsa简单加密: 1 import rsa 2 import base64 3 4 rsa_key_pair = rsa.newkeys(2048) # 生成密钥对,返回(PublicKey(n,e) ...

  6. 工控CTF_MMS

    工控CTF_MMS 参考文章 https://blog.csdn.net/song123sh/article/details/127358610 概况 MMS工控协议是基于MMS和TCP等的基础上,开 ...

  7. Nginx常用操作

    Nginx Nginx的最重要的几个使用场景 静态资源服务,通过本地文件提供服务 反向代理服务,延伸出包括缓存,负载均衡等 API服务,OpenResty 相关概念 简单请求和非简单请求 请求方法是H ...

  8. mac idea 配置Tomcat

    官网下载Tomcat 下载地址:点我直达 配置Idea 设置Application Servers 操作步骤:Intellij IDEA->Preferences->Application ...

  9. C#开发一个可被带参数调用并返回数据的控制台应用程序

    1 标准输出流控制台程序: namespace ReturnConsoleWrite { class Program { static void Main(string[] args) { //程序功 ...

  10. Windows 10 LTSC启用Microsoft Store的方法

    新建msreg.bat文件,并编辑内容如下: ========== @echo off :: BatchGotAdmin :------------------------------------- ...