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; // 定 ...
随机推荐
- WPF/C#：如何实现拖拉元素
前言 在Canvas中放置了一些元素,需要能够拖拉这些元素,在WPF Samples中的DragDropObjects项目中告诉了我们如何实现这种效果. 效果如下所示: 拖拉过程中的效果如下所示: 具 ...
- Linux 驱动：LED子系统
Linux 驱动:LED子系统 背景 在调试aw9523的时候,为了实现客户要的一个效果.需要修改驱动,但是大概看了一下驱动,但是因为不太熟悉LED子系统,所以有点云里雾里. 参考: https:// ...
- Linux gpio子系统：gpio_direction_output 与 gpio_set_value的区别
Linux gpio子系统:gpio_direction_output 与 gpio_set_value的区别 背景 最近改驱动程序,看到驱动代码中既有gpio_direction_output也有g ...
- arm linux 移植 ffmpeg 库 + x264 + x265
背景 Ffmpeg 中带有h264的解码,没有编码,需要添加x264.libx264是一个自由的H.264编码库,是x264项目的一部分,使用广泛,ffmpeg的H.264实现就是用的libx264. ...
- OpenCV程序练习（三）：图像运算
一.图像加法运算 代码 import cv2 img=cv2.imread("demoimg.jpg",0) #读取图片,参数0等价于cv2.IMREAD_GRAYSCALE,将图 ...
- BTC交易流程
交易流程 比特币的交易流程涉及多个步骤和参与方,包括发送方.接收方.矿工和比特币网络中的节点.以下是比特币交易的详细流程: 创建交易: 生成比特币地址:比特币地址是一个由公钥生成的字符串,用于接收比特 ...
- CF1591F 题解
先不管值域,设计状态 \(dp_{i,j}\) 表示考虑前 \(i\) 个数最后一个数为 \(j\) 的方案数,那么有如下转移: \[dp_{i,j} = dp_{i-1,k} (j \not = k ...
- java生成word的解决方案比较
1.Jacob Jacob是Java-COM Bridge的缩写,它在Java与微软的COM组件之间构建一座桥梁.通过Jacob实现了在Java平台上对微软Office的COM接口进行调用. 优点:调 ...
- 使用ML.NET训练一个属于自己的图像分类模型，对图像进行分类就这么简单！
前言 今天大姚给大家分享一个.NET开源.免费.跨平台(支持Windows.Linux.macOS多个操作系统)的机器学习框架:ML.NET.并且本文将会带你快速使用ML.NET训练一个属于自己的图像 ...
- Django+forms+html
在Django中,Form类通常通过继承django.forms.Form或django.forms.ModelForm来定义.当你定义一个表单类时,通常使用Form或ModelForm类,并使用各种 ...