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; // 定 ...
随机推荐
- 给你的博客加上个Live2D看板娘吧
Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解` 给你的博客加上个Live2D看板娘吧 日期:2017-12 ...
- 获取ImageView的触摸点所对应的UIImage的坐标
获取ImageView的触摸点所对应的UIImage的坐标 功能描述 实现前分析 注意事项 代码 求打赏 功能描述 在imageview上触摸图片,求对应UIImage的触摸点. 实现前分析 从ima ...
- SpringCloud开发之OpenFeign timeout和压缩等问题
在某些时候,我们希望某个同步调用执行更长的时间(异步暂时不考虑),这个时候,首先就是要设置OpenFeign的timeout设定. 下面我们举例来说明,可以如何设定TimeOut参数. 一.环境 脱离 ...
- 同时开启firewall和iptables
使用向导 With the iptables service, every single change means flushing all the old rules and reading all ...
- vue大型电商项目尚品汇（前台篇）day03
堆积了两天一起发的,先祝大家节日快乐 后面任务很繁重,还有登录注册组件还有后台管理页面,真的繁重,我现在感觉每天全天时间都在学都不一定学得完,主要想在六月一号之前把整个项目过一遍.看看能不能创造奇迹 ...
- P8571 题解
既然字符串的总长一定,不妨对于每个询问中的 \(s_k\) 的长度根号分治,假定分治阈值为 \(B\).下面令 \(L\) 为所有串长度总和. 对于长度大于 \(B\) 的字符串,这样的不同字符串至多 ...
- Polar靶场web刷题记录
Polar靶场 web刷题记录 简单部分 swp 考点:敏感文件.preg_match()函数绕过 根据题目名提示 访问 /.index.php.swp 可以用代码格式化工具美化一下 function ...
- 深入解读RabbitMQ工作原理
RabbitMQ简介 在介绍RabbitMQ之前首先要介绍一下MQ,MQ是什么?MQ全称是Message Queue,可以理解为消息队列的意思. RabbitMQ是一个实现了AMQP(Advanced ...
- 基于微信小程序+Springboot线上租房平台设计和实现【三端实现小程序+WEB响应式用户前端+后端管理】
感兴趣的可以先收藏起来,大家在毕设选题,项目以及论文编写等相关问题都可以给我加好友咨询 一. 前言介绍: 近年来,我国的社会经济迅猛发展,社会对于房屋租赁的需求也在不断增多.在房屋租赁企业中面对繁琐而 ...
- MySQL之DCL
DCL * 一个项目创建一个用户!一个项目对应的数据库只有一个! * 这个用户只能对这个数据库有权限,其他数据库你就操作不了了! 1. 创建用户 * CREATE USER 用户名@IP地址 ID ...