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 ...
随机推荐
- mysql这个垃圾迁移数据费劲半天
mysql垃圾得很! 对于一些小系统还可以.大型系统自己找麻烦--必须有高昂的人工费! 没有高昂的人工(必须有好的程序员和工程师才能解决一些复杂的问题),构建基于大量数据的应用,非常麻烦. 而这些费 ...
- IP数据报分片问题
为什么要分片? 很多时候,由于单个数据太大,超过了MTU的限定值,就要对数据包进行分组,即切割并分别发送. 我们要解决以下几个问题: 1.顺序问题.接收方可以按照原来的顺序重组这些分片,并能知道这些分 ...
- yolov1-yolov5 网络结构&正负样本筛选&损失计算
学习yolo系列,最重要的,最核心的就是网络模型.正负样本匹配.损失函数等三个方面.本篇汇总了yolov1-yolov5等5个版本的相关知识点,主要看点是在yolo框架搭建.初学者可以通过相关篇章搭建 ...
- CLR via C# 笔记 -- 特性(18)
1. 特性继承自System.Attribute,能作用于TypeDef(类.结构.枚举.接口和委托),MethodDef(含构造器),ParamDef,FieldDef,PropertyDef,Ev ...
- android系统中log机制
android系统中log机制 背景 习惯了Linux开发的我,转到安卓以后,对于安卓开发的很多问题没有经验.看到同事解决问题都会看logcat,因此有必要了解一下这些东西. 介绍 Android提供 ...
- V4L2视频采集操作流程和接口说明
背景: V4L2是V4L的升级版本,为linux下视频设备程序提供了一套接口规范.包括一套数据结构和底层V4L2驱动接口. <WAV文件格式分析> 一般操作流程(视频设备): 1.打开设备 ...
- NXP i.MX 8M Plus工业开发板规格书(四核ARM Cortex-A53 + 单核ARM Cortex-M7，主频1.6GHz)
1 评估板简介 创龙科技TLIMX8MP-EVM是一款基于NXP i.MX 8M Plus的四核ARM Cortex-A53 + 单核ARM Cortex-M7异构多核处理器设计的高性能工业评估板 ...
- AT_abc317_f 题解
调了一小时结果发现爆 long long 了. 考虑数位 dp,具体来说,设计状态 \(dp_{i,r_1,r_2,r_3,mx_1,mx_2,mx3_,c_1,c_2,c_3}\) 表示当前考虑到第 ...
- 洛谷P1747
这个题被坑麻了,题目居然不给棋盘的范围,评论区居然有人说棋盘是无限大的,我想说的是如果真是这样那么第9个点答案应该是2而不是3,这个棋盘绝对是有大小的. #include<iostream> ...
- 使用pyqt5制作简单计分桌面应用
这是一个自己写的使用pyqt5制作简单计分桌面应用的实例,希望对大家有所帮助.制作这个小程序的起因是因为有个艺术类比赛需要设计这个一个桌面程序,方便统分. (此程序尚存在部分小bug,请慎用,公开代码 ...