uniapp通过Canvas绘制网格(心电图,坐标纸等可用)

本篇文档是Canvas绘制心电图的第一个部分,想了解详情的可以关注后学习交流。

心电图的最底层需要一个网状底层,来方便进行数据的测量。
一、白底分大、中、小三个区域的网格
在这里插入图片描述
1、首先是HTML部分

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><script src="js/jquery-3.2.1.min.js"></script><!-- 引入JQuery文件(学习心电图的同学会用到,单纯学习网格不需要引入JQ文件) --><link rel="stylesheet" href="style/index.css" /><!-- 引入样式文件 --><title>网格</title></head><body><div class="grids"><canvas id="grids" width="750px" height="750px"></canvas></div><script src="js/index.js"></script><!-- 引入自己新建JS文件,为了完全保证程序正常运行,该段引入放在canvas后 --></body>
</html>

HTML创建Canvas画布,并且定义画布大小。
2、使用JS绘制网格
2.1定义所需变量名

var ctx;

2.2编写网格绘制总函数
所需要的高级网格需要三种大小的网格,分别为大、中、小,这三种网格需要被同时调用执行,故专写一个函数来共同调用三种大小的绘制函数。

/**绘制网格总函数* 分别绘制* drawSmallGrid小网格* drawMediumGrid中网格* drawBigGrid大网格*/
function drawgrid() {var c_canvas = document.getElementById("grids");drawSmallGrid(c_canvas);drawMediumGrid(c_canvas);drawBigGrid(c_canvas);return;
}

2.3编写小网格函数
众所周知,两点一线的道理canvas也受用,但是为了方便起见,网格类型的依靠循环来写,具体代码如下:

/**绘制小网格* 第一个for语句循环出纵向小方格细线条,间距为X轴方向3像素* 第二个for语句循环出横向小方格细线条,间距为Y轴方向3像素*/
function drawSmallGrid(c_canvas) {ctx = c_canvas.getContext("2d");ctx.strokeStyle = "#f1dedf";ctx.strokeWidth = 1;ctx.beginPath();for (var x = 0.5; x < 750; x += 3) {ctx.moveTo(x, 0);ctx.lineTo(x, 750);ctx.stroke();}for (var y = 0.5; y < 750; y += 3) {ctx.moveTo(0, y);ctx.lineTo(750, y);ctx.stroke();}ctx.closePath();return;
}

2.4编写中网格函数
根据小网格,同理可绘制中型网格

 /**绘制中型网格* 第一个for语句循环出纵向中方格中线条,间距为X轴方向15像素,小网格的5倍
* 第二个for语句循环出横向中方格中线条,间距为Y轴方向15像素,小网格的5倍*/function drawMediumGrid(c_canvas){ctx = c_canvas.getContext("2d");ctx.strokeStyle="#fdbeb9"; 8      ctx.strokeWidth = 2//宽度是小网格的2倍ctx.beginPath();for(var x=0.5;x<750;x+=15){ctx.moveTo(x,0);ctx.lineTo(x,750);ctx.stroke();}for(var y=0.5;y<750;y+=15){ctx.moveTo(0,y);ctx.lineTo(750,y);ctx.stroke();}ctx.closePath();
return;}

2.5编写大型网格
道理同中型网格

/**绘制大型网格* 第一个for语句循环出纵向大方格中线条,间距为X轴方向75像素,小网格的5倍* 第二个for语句循环出横向大方格中线条,间距为Y轴方向75像素,小网格的5倍*/
function drawBigGrid(c_canvas) {ctx = c_canvas.getContext("2d");ctx.strokeStyle = "#e0514b";ctx.strokeWidth = 3;ctx.beginPath();for (var x = 0.5; x < 750; x += 75) {ctx.moveTo(x, 0);ctx.lineTo(x, 750);ctx.stroke();}for (var y = 0.5; y < 750; y += 75) {ctx.moveTo(0, y);ctx.lineTo(750, y);ctx.stroke();}ctx.closePath();return;
}

至此,大中小三中网格绘制成功,接下来只需要调用总函数,三中网格就能显示在页面上
2.6调用总函数

drawgrid();

二、更改网格样式(之前文档心电图样式)
我之前文档内的心电图同款网格只需要将小型网格和大型网格函数删除,并且在总函数内,删除对这两个函数的调用即可。

同时,将网格的颜色改变,即可实现我之前文档中的心电图同款网格。这里只告诉大家方法,理解了便能画出来了。

在这里给大家上一段CSS代码,来修改一些细节样式

* {padding: 0;margin: 0;
}.grids {width: 750px;height: 750px;background: black;
}

通过这段代码,可以将网格的外边距取消,并且将网格的背景颜色改成黑色(或者其他颜色自己喜欢就好),通过这种改变DIV的背景颜色实现对网格添加背景颜色的方法,有利于我们之后在心电图操作中“显示/隐藏”网格的操作选项。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/19226.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

包和final

一.什么是包&#xff1f; 包就是文件夹,用来管理各种不同功能的Java类,方便后期代码维护。 二.包名的规则 公司域名反写包的作用,需要全部英文小写&#xff0c;见名知意。 com.xxx.domain domain:这个包是干什么的。 三.使用其他类的规则 1.使用同一个包中的类时,不需要导…

【贪心算法】C++解决回文串、增减字符串匹配、分发饼干、跳跃游戏、加油站问题

1. 前言 贪心算法&#xff08;Greedy Algorithm&#xff09;是一种在每一步选择中都采取当前状态下最优决策的算法。贪心算法通常用来解决最优化问题&#xff0c;其核心思想是通过局部最优解逐步推导出全局最优解。 在贪心算法中&#xff0c;我们并不总是考虑到未来可能发生的…

代理注册湖北武汉投资管理公司流程和条件

我公司代理注册湖北武汉投资管理公司&#xff0c;现在大家都知道全国的投资管理公司已经停批了&#xff0c;很多需要收购的老板都是通过收购现成的投资管理公司经营的&#xff0c;现在我告诉大家一个好消息&#xff0c;我们有渠道办理湖北武汉资产管理公司&#xff0c;详情致电…

521源码-免费源码下载-免费学习网站教程-宝塔面板ssl网站证书到期后弹出无法续期错误提示

宝塔面板如果从老版本升级到8.10后&#xff0c;当点站证书过期续期时会弹出错误&#xff1a; 排查文件是找不到问题出在哪里&#xff0c;导致续期错误。 解决办法&#xff1a;通过摸索&#xff0c;最简单的就是删除站点&#xff0c;注意&#xff1a;只是删除&#xff0c;不是把…

亚马逊VC账号产品热销,在美国哪些智能小家电产品最好卖?

亚马逊VC账号产品在美国市场的热销&#xff0c;反映了消费者对于特定智能小家电产品的强烈需求。智能小家电产品因其实用性、便捷性和科技感&#xff0c;近年来在美国市场备受追捧。 以下是一些在亚马逊VC账号上热销的智能小家电产品&#xff1a; 智能扫地机器人 这类产品在美…

[vue3后台管理一]vue3下载安装及环境配置教程

[vue3后台管理二]vue3下载安装element plus 一、vue3下载安装element plus cnpm install element plus二&#xff1a;修改main.js import { createApp } from "vue"; import App from "./App.vue"; import ElementPlus from "element-plus"; …

JAVA:Random详解

Java中的java.util.Random类用于生成伪随机数。它提供了多种方法来生成不同类型的随机数&#xff0c;包括整数、浮点数和布尔值。以下是对Random类及其主要方法的详细介绍 一、生成随机数 创建一个Random对象&#xff0c;可以使用以下两种方式&#xff1a; 无参构造函数&…

建议大家少用点儿网站测速工具

春节休息期间明月有接了几个服务器代运维的业务&#xff0c;期间就发现不少新手站长们还在用 17ce、站长工具等等这些网站测速工具来评判站点访问速度的&#xff0c;感觉很有必要给大家聊聊这个事儿&#xff0c;因为这毕竟也是一个涉及服务器安全的一个重要环节了。 其实&#…

那些不起眼但很好玩的API合辑

那些不起眼但很好玩的API&#xff0c;为我们带来了许多出人意料的乐趣和惊喜。这些API可能看起来并不起眼&#xff0c;但它们却蕴含着无限的创意和趣味性。它们可以是一些小游戏API&#xff0c;让我们可以在闲暇时刻尽情娱乐&#xff1b;也可以是一些奇特的音乐API&#xff0c;…

【后端开发】服务开发场景之分布式(CAP,Raft,Gossip | API网关,分布式ID与锁 | RPC,Dubbo,Zookeeper)

【后端开发】服务开发场景之分布式&#xff08;CAP&#xff0c;Raft&#xff0c;Gossip | API网关&#xff0c;分布式ID与锁 | RPC&#xff0c;Dubbo&#xff0c;Zookeeper&#xff09; 文章目录 1、如何设计一个分布式系统&#xff1f;&#xff08;底层原理&#xff09;理论&a…

怎样清理Mac存储空间 苹果电脑内存不够用怎么办 苹果电脑内存满了怎么清理

在使用 Mac 电脑的过程中&#xff0c;用户经常会遇到磁盘空间不足的困扰&#xff0c;这时候就需要寻找有效的方法来清理苹果电脑内存了。 清理Mac存储空间可以通过多种方法进行&#xff0c;以确保你的Mac能够高效运行并释放宝贵的存储空间。以下是一些有效的清理和优化方法&am…

代码随想录第二十二天 | 654.最大二叉树, 617.合并二叉树, 700.二叉搜索树中的搜索, 98. 验证二叉搜索树

654.最大二叉树 看完想法&#xff1a;构造树一般采用的是前序遍历&#xff0c;因为先构造中间节点&#xff0c;然后递归构造左子树和右子树 确定递归函数的参数和返回值:返回TreeNode* 输入vector<int>& num; 确定终止条件:当输入数组大小1的时候&#xff0c;传入数…

数据结构和算法|排序算法系列(一)|选择排序

首先需要你对排序算法的评价维度和一个理想排序算法应该是什么样的有一个基本的认知&#xff1a; 《Hello算法之排序算法》 主要内容来自&#xff1a;Hello算法11.2 选择排序 选择排序是明显的基于比较的排序。下文开始阐述选择排序的整个算法流程 算法流程 选择排序应该已…

grpc NewClient 报错 name resolver error: produced zero addresses

场景 grpc版本: google.golang.org/grpc v1.64.0 连接客户端: import("google.golang.org/grpc""net" ) // 拿着设备ID 去获取连接 var connMap map[string]net.Conn conn, err : grpc.NewClient("device_id",grpc.WithContextDialer(func(ctx…

一致性hash算法原理图和负载均衡原理-urlhash与least_conn案例

一. 一致性hash算法原理图 4台服务器计算hash值图解 减少一台服务3台服务器计算hash值图解 增加一台服务器5台服务器计算hash值图解 二. 负载均衡原理-urlhash与least_conn 2.1.urlhash案例 # urlhash upstream tomcats {hash $requ

Spring Boot + Spring Security + JWT 从零开始

Spring Boot + Spring Security + JWT 从零开始 这篇笔记中,我们将学习如何从头开始设置一个带有Spring Security的Spring Boot应用程序,它连接到一个LDAP身份验证的Spring Security身份验证提供程序,这将是即将出现的,这个连接和工作都是开箱即用的。 实际上,设置这个非…

MySQL的安全性

给root用户设置密码 点击用户--下面三个账号双击--进行编辑 修改密码--修改完进行保存 关闭数据库后连接不上 重新编辑&#xff0c;设置密码 新建账号 填入信息--保存&#xff08;主机哪里要选择%&#xff09; 连接这个新的账号 点击连接--填写连接的名称&#xff0c;地址&…

深入理解Spring Security:保护你的Web应用程序

深入理解Spring Security:保护你的Web应用程序 这听起来像是一部詹姆斯邦德电影,邦德试图进入坏家伙的藏身之处。坏家伙设置了一系列超级安全措施,有多层次的安全防御。邦德克服了其中一层,进入了隐藏处,但又遇到了下一个陷阱。他战胜了一个又一个陷阱,最终克服了所有障…

字母的大小写转换

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 在Python中&#xff0c;字符串对象提供了lower()方法和upper()方法进行字母的大小写转换&#xff0c;即可用于将大写字母转换为小写字母或者将小写字…

643. 子数组最大平均数 I

给你一个由 n 个元素组成的整数数组 nums 和一个整数 k 。 请你找出平均数最大且 长度为 k 的连续子数组&#xff0c;并输出该最大平均数。 任何误差小于 10-5 的答案都将被视为正确答案。 示例 1&#xff1a; 输入&#xff1a;nums [1,12,-5,-6,50,3], k 4 输出&#xff…