10-canva绘制数据点
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>10-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 dotLocation = {
101 x: 100,
102 y: 300
103 }
104 let dotSize = 20;
105 /*
106 // 2.绘制数据点
107 oCtx.beginPath();
108 oCtx.moveTo(dotLocation.x - dotSize / 2, dotLocation.y - dotSize / 2);
109 oCtx.lineTo(dotLocation.x + dotSize - dotSize / 2, dotLocation.y - dotSize / 2);
110 oCtx.lineTo(dotLocation.x + dotSize - dotSize / 2, dotLocation.y + dotSize - dotSize / 2);
111 oCtx.lineTo(dotLocation.x - dotSize / 2, dotLocation.y + dotSize - dotSize / 2);
112 oCtx.closePath();
113 oCtx.fill();
114 */
115 for(let i = 0; i < list.length; i++){
116 oCtx.beginPath();
117 oCtx.moveTo(list[i].x - dotSize / 2, list[i].y - dotSize / 2);
118 oCtx.lineTo(list[i].x + dotSize - dotSize / 2, list[i].y - dotSize / 2);
119 oCtx.lineTo(list[i].x + dotSize - dotSize / 2, list[i].y + dotSize - dotSize / 2);
120 oCtx.lineTo(list[i].x - dotSize / 2, list[i].y + dotSize - dotSize / 2);
121 oCtx.closePath();
122 oCtx.fill();
123 }
124 </script>
125 </body>
126 </html>
10-canva绘制数据点的更多相关文章
- 理解数据点，自变量和因变量（参数和值）ChartControl
WinForms Controls > Controls > Chart Control > Fundamentals > Charting Basics > Under ...
- [转]as3 算法实例【输出1 到最大的N 位数 题目：输入数字n，按顺序输出从1 最大的n 位10 进制数。比如输入3，则输出1、2、3 一直到最大的3 位数即999。】
思路:如果我们在数字前面补0的话,就会发现n位所有10进制数其实就是n个从0到9的全排列.也就是说,我们把数字的每一位都从0到9排列一遍,就得到了所有的10进制数. /** *ch 存放数字 *n n ...
- c++描述将一个2进制数转化成10进制数（用到初始化栈，进栈，入栈）
/* c++描述将2进制数转化成10进制数 问题,1.初始化栈后,用new,不知道delete是否要再写一个函数释放内存, 还是在哪里可以加上delete 2.如果栈满了,我要分配多点空间,我想的办法 ...
- ZingChart 隐藏数据点
正常情况下 zingChart 的数据点会显示到图表中,但是如果数据点很多的情况下,可能会让你无法准确的预测趋势,而且也不美观 在 js 配置中添加最多允许显示的数据点,超过这个值将不显示数据点 效果 ...
- c语言将2进制数转化为10进制数（栈的初始化，进栈，出栈）
//c语言描述 将2进制转化为10进制 #include <stdio.h> #include <stdlib.h> #include <math.h> #defi ...
- 【C语言编程练习】5.10寻找水仙数
1. 题目要求 如果一个3位数等于各位数字的立方和,则称这个数为水仙数,例如407=4^3+0^3+7^3.编写一个程序,找出全部的水仙数 2. 题目分析 感觉又和之前的题目大同小异了,先找出解空间, ...
- canva绘制圆角矩形
在做组态的时候,需要支持矩形圆角格式,但是因为canvas本身不带有圆角矩形,需要自行算出坐标进行绘制 方案一.统一圆角 <!DOCTYPE html> <html> < ...
- Draw_extend使用OpenGL显示数据点
//alter load_map.dev //safety verion 2016/1/12 #include <iostream> #include <fstream> #i ...
- HDOJ/HDU 2352 Verdis Quo(罗马数字与10进制数的转换)
Problem Description The Romans used letters from their Latin alphabet to represent each of the seven ...
- 已知从BUF开始存放了10个字类型有符号数据，编程求出这10个数中的最大数和最小数（将最大数存入MAX字单元、最小数存入MIN字单元），并将其以10进制数的形式在屏幕上显示出来。
data segment pmax db 0dh,0ah , 'MAX : ','$' pmin db 0dh,0ah , 'MIN : ','$' buf ...
随机推荐
- python的requirements.txt_维护项目依赖包
pycharm没有类似maven用于管理依赖包的工具,当一个项目在新的环境运行前,需要将对应依赖的包下载回来,如果一个个下载,会出现缺漏或版本号不对应的情况,这个时候可以用requirements.t ...
- 【iOS】push控制器时隐藏tabbar，dismiss控制器时显示tabbar
在push之前将控制器的属性hidesBottomBarWhenPushed设置为yes就好. //准备要把控制器vc给push出去了 UIViewController *vc = [[UIViewC ...
- This app has crashed because it attempted to access privacy-sensitive data without a usage descripti
运行环境 XCode 8.2.1 问题描述 当调取相册的时候APP崩溃并显示标题的错误:This app has crashed because it attempted to access priv ...
- 全国产RK3568J + FPGA的PCIe、FSPI通信实测数据分享！
测试数据汇总 案例 时钟频率 理论速率 测试结果 FSPI通信案例 150MHz 71.53MB/s 读速率:67.452MB/s 写速率:52.638MB/s PCIe通信案例 100MHz 803 ...
- 免费领 | 2000件“直击灵魂”的Polo衫，创龙科技10周年献礼！
一件"有灵魂"的Polo衫 时光荏苒,创龙科技即将迎来10周年庆!为感谢各位客户多年的支持与信任,创龙科技特推出10周年献礼活动--2000件"直击灵魂&qu ...
- NXP i.MX 8M Plus工业核心板硬件说明书（ 四核ARM Cortex-A53 + 单核ARM Cortex-M7，主频1.6GHz）
1 硬件资源 创龙科技SOM-TLIMX8MP是一款基于NXP i.MX 8M Plus的四核ARM Cortex-A53 + 单核ARM Cortex-M7异构多核处理器设计的高端 ...
- CF1591F 题解
先不管值域,设计状态 \(dp_{i,j}\) 表示考虑前 \(i\) 个数最后一个数为 \(j\) 的方案数,那么有如下转移: \[dp_{i,j} = dp_{i-1,k} (j \not = k ...
- DeepViT：字节提出深层ViT的训练策略 | 2021 arxiv
作者发现深层ViT出现的注意力崩溃问题,提出了新颖的Re-attention机制来解决,计算量和内存开销都很少,在增加ViT深度时能够保持性能不断提高 来源:晓飞的算法工程笔记 公众号 论文: Dee ...
- 解决方案 | onenote无法同步，显示：证书错误，应用程序在加载SSL库是遇到内部错误。
解决方案:一般是公司网络或者学校网络的问题,更换手机使用的数据流量热点无线网络即可.
- Service Mesh Summit 回顾 | 轻舟服务网格的无侵入增强 Istio 经验
在云原生社区近日主办的 Service Mesh Summit 2022 服务网格峰会上,网易数帆云原生技术专家方志恒分享了轻舟服务网格无侵入增强 Istio 的经验,本文据此次分享整理,介绍了对无侵 ...