11-canvas绘制折线图
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绘制折线图的更多相关文章
- 用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Android自己定义组件系列【9】——Canvas绘制折线图
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了非常多插件,可是非常多时候我们须要依据详细项目自己定义这些图表,这一篇文章我们一起来看看怎样在Android中使用Can ...
- Android自定义控件 -Canvas绘制折线图(实现动态报表效果)
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...
- Android自定义组件系列【9】——Canvas绘制折线图
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...
- canvas绘制折线图
效果图: 重难点: 1.画布左上角的顶点的坐标为(0 ,0),右下角的坐标最大,与平常思维相反 2.数据的处理 html代码: <!DOCTYPE html><html lang=& ...
- canvas绘制折线图(仿echarts)
遇到的问题:Retina屏上字体线条模糊问题 解决方案:放大canvas的大小,然后用css压缩回原大小,例如:想要900*400的画布,先将画布设置为 width="1800px" ...
- 【带着canvas去流浪】（2）绘制折线图
目录 一. 任务说明 二. 重点提示 三. 示例代码 3.1 一般折线图 3.2 用贝塞尔曲线绘制平滑折线图 四. 大数据量场景 示例代码托管在:https://github.com/dashnowo ...
- 带着canvas去流浪系列之二 绘制折线图
[摘要] 用canvasAPI实现echarts简易图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...
- 【Canvas】(2)---绘制折线图
绘制折线图 之前在工作的时候,用过百度的ECharts绘制折线图,上手很简单,这里通过canvas绘制一个简单的折线图.这里将一整个绘制过程分为几个步骤: 1.绘制网格 2.绘制坐标系 3.绘制点 4 ...
- php中用GD绘制折线图
php中用GD绘制折线图,代码如下: Class Chart{ private $image; // 定义图像 private $title; // 定义标题 private $ydata; // 定 ...
随机推荐
- 搭建第一个web项目
实现使用: 1.创建一个普通java文件 2.Java文件的类名实现HttpServlet 3.重写service方法 4.在WEB-INF下的web.xml中添加请求与servlet类的映射关系 定 ...
- 记录一次BoxedApp Packer脱壳解包的记录
收到朋友的一个求助,一个硬件配套的上位机软件,无法联系到供应商,没有授权,在新电脑安装后无法使用. 简单的记录下过程 首先打开发过来的软件的目录下,一个配置工具,从图片可以判断,是.net winfo ...
- 获取ImageView的触摸点所对应的UIImage的坐标
获取ImageView的触摸点所对应的UIImage的坐标 功能描述 实现前分析 注意事项 代码 求打赏 功能描述 在imageview上触摸图片,求对应UIImage的触摸点. 实现前分析 从ima ...
- ClickHouse特性及底层存储原理
ClickHouse的特性 ClickHouse是一款MPP架构的列式存储数据库,但MPP和列式存储并不是什么"稀罕"的设计.拥有类似架构的其他数据库产品也有很多,但是为什么偏偏只 ...
- 案例分享！RK3568 + FPGA多通道AD采集处理与显示
案例展示 测试数据汇总 表 1 本文带来的是基于瑞芯微RK3568J + 紫光同创Logos-2的ARM + FPGA多通道AD采集处理与显示案例. 本次案例演示的开发环境如下: Wind ...
- 梁培利DeFi去中心化金融课程笔记2024版
课程链接:https://space.bilibili.com/220951871/channel/collectiondetail?sid=2824381&ctype=0 讲义仓库:http ...
- debian11安装备忘
1. 网卡驱动 参考网址:如何安装Debian RTL8821CE驱动? 2. 分辨率 貌似还是有点问题,还要进一步研究一下 参考网址:虚拟机中debian11修改控制台(console)分辨率|li ...
- Nginx负载配置
目录 Nginx 负载均衡笔记 1. 概述 1.1 Nginx 简介 1.2 负载均衡概述 2. 四层负载均衡(传输层) 2.1 工作原理 2.2 特点 2.3 优缺点 优点 缺点 2.4 示例场景 ...
- 014_用vim复制粘贴_保持双手正位
[oeasy]python0014_用vim复制粘贴_保持双手正位 继续运行 回忆上次内容 程序员 还是 很可爱的 要关心 身边的程序员 啊 毕竟是新时代的 典型新职业 文明 主流职业 血型 ...
- 【游记】CSP 2023
day 0 和 printfmingren 整理了一下不会的知识点,发现有点多,遂开摆 音游真的太好玩了 对着<算法竞赛进阶指南>复习了下对拍器的写法,把部分算法的模板又打了一遍 感觉前途 ...