1 <!DOCTYPE html>

  2 <html lang="en">

  3 <head>

  4     <meta charset="UTF-8">

  5     <title>11-Canvas绘制折线图</title>

  6     <style>

  7         *{

  8             margin: 0;

  9             padding: 0;

 10         }

 11         canvas{

 12             display: block;

 13             margin: 0 auto;

 14             background: red;

 15         }

 16     </style>

 17 </head>

 18 <body>

 19 <canvas width="500" height="400"></canvas>

 20 <script>

 21     // 1.拿到canvas

 22     let oCanvas = document.querySelector("canvas");

 23     // 2.从canvas中拿到绘图工具

 24     let oCtx = oCanvas.getContext("2d");

 25     // 3.定义变量保存小方格的尺寸

 26     let gridSize = 50;

 27     // 4.拿到canvas的宽高

 28     let canvasWidth = oCtx.canvas.width;

 29     let canvasHeight = oCtx.canvas.height;

 30     // 5.计算在垂直方向和水平方向可以绘制多少条横线

 31     let row = Math.floor(canvasHeight / gridSize);

 32     let col = Math.floor(canvasWidth / gridSize);

 33     // 6.绘制垂直方向的横线

 34     for(let i = 0; i < row; i++){

 35         oCtx.beginPath();

 36         oCtx.moveTo(0, i * gridSize - 0.5);

 37         oCtx.lineTo(canvasWidth, i * gridSize - 0.5);

 38         oCtx.strokeStyle = "#ccc";

 39         oCtx.stroke();

 40     }

 41     // 7.绘制水平方向的横线

 42     for(let i = 0; i < col; i++){

 43         oCtx.beginPath();

 44         oCtx.moveTo(i * gridSize - 0.5, 0);

 45         oCtx.lineTo(i * gridSize - 0.5, canvasHeight);

 46         oCtx.strokeStyle = "#ccc";

 47         oCtx.stroke();

 48     }

 49

 50     // 1.计算坐标系原点的位置

 51     let originX = gridSize;

 52     let originY = canvasHeight - gridSize;

 53     // 2.计算X轴终点的位置

 54     let endX = canvasWidth - gridSize;

 55     // 3.绘制X轴

 56     oCtx.beginPath();

 57     oCtx.moveTo(originX, originY);

 58     oCtx.lineTo(endX, originY);

 59     oCtx.strokeStyle = "#000";

 60     oCtx.stroke();

 61     // 4.绘制X轴的箭头

 62     oCtx.lineTo(endX - 10, originY + 5);

 63     oCtx.lineTo(endX - 10, originY - 5);

 64     oCtx.lineTo(endX, originY);

 65     oCtx.fill();

 66

 67     // 5.计算Y轴终点的位置

 68     let endY = gridSize;

 69     // 3.绘制Y轴

 70     oCtx.beginPath();

 71     oCtx.moveTo(originX, originY);

 72     oCtx.lineTo(originX, endY);

 73     oCtx.strokeStyle = "#000";

 74     oCtx.stroke();

 75     // 4.绘制X轴的箭头

 76     oCtx.lineTo(originX - 5, endY + 10);

 77     oCtx.lineTo(originX + 5, endY + 10);

 78     oCtx.lineTo(originX, endY);

 79     oCtx.fill();

 80

 81     // 1.拿到服务器返回数据

 82     let list = [

 83         {

 84             x: 100,

 85             y: 300

 86         },

 87         {

 88             x: 200,

 89             y: 200

 90         },

 91         {

 92             x: 300,

 93             y: 250

 94         },

 95         {

 96             x: 400,

 97             y: 100

 98         },

 99     ];

100     let dotSize = 20;

101     // 2.绘制数据点

102     for(let i = 0; i < list.length; i++){

103         oCtx.beginPath();

104         oCtx.moveTo(list[i].x - dotSize / 2, list[i].y - dotSize / 2);

105         oCtx.lineTo(list[i].x + dotSize - dotSize / 2, list[i].y - dotSize / 2);

106         oCtx.lineTo(list[i].x + dotSize - dotSize / 2, list[i].y + dotSize - dotSize / 2);

107         oCtx.lineTo(list[i].x - dotSize / 2, list[i].y + dotSize - dotSize / 2);

108         oCtx.closePath();

109         oCtx.fill();

110     }

111

112     // 1.绘制折线

113     oCtx.beginPath();

114     for(let i = 0; i < list.length; i++){

115         if(i === 0){

116             oCtx.moveTo(list[i].x, list[i].y);

117         }else{

118             oCtx.lineTo(list[i].x, list[i].y);

119         }

120     }

121     oCtx.strokeStyle = "blue";

122     oCtx.stroke();

123 </script>

124 </body>

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. c++ 线程使用

    C++中的线程可以通过标准库提供的thread类实现.该类提供了创建和管理线程的方法和函数. 创建线程的方法: #include <thread> ... // 创建一个线程,其执行函数为 ...

  2. pytest-parallel 多线程执行和allure生成报告，allure生成报告失败

    背景: 使用多线程pytest-parallel执行测试用例,使用allure生成测试报告,发现生成报告内容为NaN 使用的pytest执行命令: pytest.main(["TestCas ...

  3. Python 潮流周刊#57：Python 该采用日历版本吗？

    本周刊由 Python猫 出品,精心筛选国内外的 250+ 信息源,为你挑选最值得分享的文章.教程.开源项目.软件工具.播客和视频.热门话题等内容.愿景:帮助所有读者精进 Python 技术,并增长职 ...

  4. 什么是spring，它能够做什么?

    1.什么是SpringSpring是一个开源框架,它由Rod Johnson创建.它是为了解决企业应用开发的复杂性而创建的. Spring使用基本的JavaBean来完成以前只可能由EJB完成的事情. ...

  5. Linux设备模型：3、Uevent

    作者:wowo 发布于:2014-3-10 20:39 分类:统一设备模型 http://www.wowotech.net/device_model/uevent.html Uevent Uevent ...

  6. 3568F-PCIe 5G通信测试手册

  7. 广播变量的使用-----通过ip查询属于哪个省份

    1,为什么要使用广播变量? 举一个简单的例子,我们要处理一份log文件,里面有ip地址. 20090121000132095572000|125.213.100.123|show.51.com|/sh ...

  8. ABP框架开发实例教程-获取前端样式和脚本

    1.运行生成的ABP框架,设置WEB.MVC项目为启动项目,点击开始运行,界面如下,样式和脚本文件不存在,所以导致界面无法正常显示,这个我研究ABP遇到的第二个坑,第一个坑是生成数据库. 2.为什么没 ...

  9. Mysql的Innodb和MyISAM引擎的区别

    区别项 Innodb MyISAM  事务  支持  不支持 锁粒度  行锁,适合高并发 表锁,不适合高并发  是否默认  默认  非默认  支持外键  支持外键  不支持  适合场景  读写均衡,写 ...

  10. Ubuntu下的LabVIEW开发

    1 虚拟机的安装 我用的是Virtua Box 的虚拟机,当然也有其他的类似软件:下载虚拟机的网址: https://www.virtualbox.org/wiki/Downloads 自行去下载合适 ...