文档章节

Canvas绘制心电图——改变波幅(JS按钮改变Canvas图片大小)

o
 osc_fmg49rzg
发布于 2019/03/20 09:56
字数 568
阅读 5
收藏 0
hb

钉钉、微博极速扩容黑科技,点击观看阿里云弹性计算年度发布会!>>>

想了解心电图绘制过程的同学可以查看原先的技术文档,

单纯想了解JS放大缩小功能的,认真读懂此片文档。

写法很多,不唯一,在这里只举我的例子。

首先我们需要在原有的变量定义基础上增加两个变量:

 

之后开始写JS方法:

1 var mulNum = 1; //定义增益变量
2 var i = 1; //定义判断值变量

之后写增益变化方法(即JS编写放大缩小的判断):

//心电图波纹增益
function multiple() {
  if (i == 4) {
    i = 1;
  }
  i++;
  switch (i) {
    case 2:
      mulNum = 2;
      document.getElementById("multiple").innerHTML = "增益(20)";
      break;
    case 3:
      mulNum = 0.5;
      document.getElementById("multiple").innerHTML = "增益(5)";
      break;
    case 4:
      mulNum = 1;
      document.getElementById("multiple").innerHTML = "增益(10)";
      break;
  }
  hide();//清除
  draw();//重绘
}

这里的i要定义在外面,不然每次执行这个函数,都会重新加载一遍i=1,写在外面就不会发生这样的情况。

之后我们还需要在每次变化之后,将按钮原有的值做一个变化。所以利用inner。

之后我们将mulNum的值乘一下想要改变原来图形的坐标就可以了,在这里我是对心电图的Y轴的值做一个改变所以在Y轴乘mulNum即可:

 1 /**绘制心电图 */
 2 function drawLine(c_canvas) {
 3   hb = c_canvas.getContext("2d");
 4   hb.strokeStyle = "#0f0";
 5   //线条颜色为绿色
 6   hb.strokeWidth = 2;
 7   //线条粗细为2
 8   hb.beginPath();
 9   beatArray.forEach(a => {
10     hb.lineTo(a[0], a[1] * mulNum + 80);
11   });
12   /**for循环 */
13   hb.stroke();
14   hb.closePath();
15 }

就像文章开头提到的,想要实现任何功能的方法不唯一,我这只是提供一种我个人的思路,希望有大佬能有更简便易懂的方法互相交流讨论。

想了解心电图的朋友、或者只对这样几句代码不好理解的,可以关注我之前的几篇文档,把之前几篇文档合起来就是一篇完整的代码供参考。

//心电图波纹增益
function multiple() {
if (i == 4) {
i = 1;
}
i ++;
switch (i) {
case 2:
mulNum = 2;
document. getElementById( "multiple").innerHTML = "增益(20)";
break;
case 3:
mulNum = 0.5;
document. getElementById( "multiple").innerHTML = "增益(5)";
break;
case 4:
mulNum = 1;
document. getElementById( "multiple").innerHTML = "增益(10)";
break;
}
hide(); //清除
draw(); //重绘
}
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

2020-2021 设计趋势ISUX报告 · 用户体验篇

据说点击蓝色字体关注同学都升职加薪了 前言 身为用户体验设计师,无时无刻不被世界上的新事物冲刷着认知——互联网红利下降带来变化莫测的商业动向、循着摩尔定律野蛮生长日新月异的新技术、...

静电1983
07/04
0
0
当查询的数据来自多个数据源,有哪些好的分页策略?

概述 在业务系统开发中,尤其是后台管理系统,列表页展示的数据来自多个数据源,列表页需要支持分页,怎么解决? 问题 如上图,数据源可能来自不同 DB 数据库,可能来自不同 API 接口,也可能...

新亮笔记
03/14
9
0
花最少的时间点亮OLED之RT-Thread u8g2之(DIY一个小小天气站+万年历)

准备花几天时间DIY一个小小天气站+万年历,一来可以送给好友,二来也是蹦着熟悉RT-Thread的目的去学习,以提高自己的工作效率,指不定哪天就用上了,总之技多不压身嘛! 1、什么是u8g2? u8g...

Aladdin-Wang
07/10
0
0
HTML5 不得不看的本地存储 LocalStorage

用过HTML5 本地存储和sessionStorage的,你就感觉html5很强大,比cookie和session好用很多,下面让我们来学习这个知识吧... 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB...

胡哥有话说
2016/08/16
0
0
Oracle SQL自动化审核工具的实现

作者介绍 梁铭图,新炬网络首席架构师,十多年数据库运维、数据库设计、数据治理以及系统规划建设经验,拥有Oracle OCM、Togaf企业架构师(鉴定级)、IBM CATE等认证,曾获dbaplus年度MVP以及...

osc_sezkegv6
18分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部