HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像，我们可以使用canvas来绘制类似心电图的东西。

效果图如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <style>

        canvas {

            width: 500px;

            height: 250px;

            border: 1px solid #666;

        }

    </style>

    <body>

        <canvas id="canvas"></canvas>

    </body>

    <script>

        //获取canvas的节点

        var canvas = document.getElementById('canvas');

        //ctx是一个画笔

        var ctx = canvas.getContext('2d');

        // 绿色矩形

        ctx.beginPath();

        //线的粗细

        ctx.lineWidth = "1";

        //线的颜色

        ctx.strokeStyle = "red";

        //起始位置

        ctx.moveTo(0, 10);

        var x = 0;

        //一个定时器

        setInterval(function() {

            //x轴的偏移

            x += 10;

            //y轴的偏移取随机数

            ctx.lineTo(x, Math.random() * 100);

            ctx.stroke();

        }, 1000)

    </script>

</html>

H5canvas画类似心电图的更多相关文章

  1. 转载爱哥自定义View系列－－文字详解

    FontMetrics FontMetrics意为字体测量,这么一说大家是不是瞬间感受到了这玩意的重要性?那这东西有什么用呢?我们通过源码追踪进去可以看到FontMetrics其实是Paint的一个内 ...

  2. Windows控制台下绘制简单图形

    最近接触到一个很有意思的问题,如何在Windows控制台下画图,翻遍了C的头文件也没找到画图的函数,好吧,那就用Windows提供的API函数吧,看来想移植是没戏了.先画一个简单的图,类似心电图那种吧 ...

  3. UWP 手绘视频创作工具技术分享系列 - 有 AI 的手绘视频

    AI(Artificial Intelligence)正在不断的改变着各个行业的形态和人们的生活方式,图像识别.语音识别.自然语言理解等 AI 技术正在自动驾驶.智能机器人.人脸识别.智能助理等领域中 ...

  4. Qt4.5 QFrame（相当于Delphi里的TPanel，有各种凹凸方式）

    QFrame类是有框架的窗口部件的基类. QPopupMenu使用这个来把菜单“升高”,高于周围屏幕.QProgressBar有“凹陷”的外观.QLabel有平坦的外观.这些有框架的窗口部件可以被改变 ...

  5. 基于 GCDAsyncSocket，简单实现类似《你猜我画》的 socket 数据传输

    一.前言 Socket Socket 是对 TCP/IP 协议的封装,其中IP协议对应为网络层,TCP 协议对应为传输层,而我们常用的HTTP协议,是位于应用层,在七层模型中HTTP协议是基于 TCP ...

  6. 基于 socket.io， 简单实现多平台类似你猜我画 socket 数据传输

    一.前言 socket.io 实现了实时双向的基于事件的通讯机制,是基于 webSocket 的封装,但它不仅仅包括 webSocket,还对轮询(Polling)机制以及其它的实时通信方式封装成了通 ...

  7. 使用echarts画一个类似组织结构图的图表

    昨天,写了一篇关于圆环进度条的博客(请移步:Vue/React圆环进度条),已经烦不胜烦,今天又遇到了需要展示类似公司的组织结构图的功能需求,要冒了!!! 这种需求,自己用div+css也是可以实现的 ...

  8. html5使用canvas实现毫秒级画心电图

  9. css如何画出类似原生的线条？

    做前端的程序猿特别是移动端的,都很头疼遇到一种情况就是需要div底部加一个线条但是 1px的效果很粗,跟设计案上的不符合. 我的一个伙伴查找出来的一个解决方法: 在需要加上的线条的地方加上一个div ...

随机推荐

  1. xml是什么

    XML(Extensible Markup Language)是可扩展标记语言,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言 ...

  2. github PageHelper使用PageInfo数据错乱问题

    如果出现了数据错乱,检查一下代码是否正确 PageHelper.start(1,10); List<MyEntity> lists = mapper.query(); PageInfo&l ...

  3. 如何清空css 的默认边距

    在网页开发中,html的元素,有部分元素默认是有内外边距的,例如body 元素,是有默认边距的 所以在通常情况下,我们都要先清空元素的内外边距:使用通配符选择器* 清空元素的内边距和外边距 ;; } ...

  4. 使用TensorFlow训练模型的基本流程【转】

    原文地址(https://github.com/wmpscc/TensorflowBaseDemo ) 本篇文章将介绍使用tensorflow的训练模型的基本流程,包括制作读取TFRecord,训练和 ...

  5. [原创] debian 9.3 搭建Jira+Confluence+Bitbucket项目管理工具(二) -- 安装jira 7.5.4

    [原创] debian 9.3 搭建Jira+Confluence+Bitbucket项目管理工具(二) -- 安装jira 7.5.4 环境都配置好以后, 开始搭建Jira的环境, 这里参考了一篇文 ...

  6. python入门（十四）：面向对象（属性、方法、继承、多继承）

    1.任何东西1)属性(特征:通常可以用数据来描述)(类变量和实例变量)2)可以做一些动作(方法) 类来管理对象的数据.属性:类变量和实例变量(私有变量)方法:    1)实例方法    2)类方法   ...

  7. Word 通过尾注插入参考文献

    一步:把鼠标移到论文要插入的位置,然后点击引用: 第二步:点击插入尾注: 第三步:点击视图,接着点击草稿: 第四步:再次点击引用,接着点击显示备注,左下角出现尾注矩形框菜单栏,选择尾注分隔符,可以删除 ...

  8. Zabbix监控平台3.2.4（一）搭建部署与概述

    一,Zabbix架构 zabbix 是一个基于 WEB 界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案.zabbix 能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制 ...

  9. LinkedHashMap 根据PUT顺序排序Map

    最近工程里面报表需要合计 , 因为所有的项都是动态的,所以只能动态添加. 思路是使用Map,初始化所有Map,然后在Map中合计并且覆盖. 使用HashMap , 初始化后所有动态项的顺序都乱了. M ...

  10. Python复杂场景下字符串处理相关问题与解决技巧

      1.如何拆分含有多种分隔符的字符串¶ ''' 实际案例: 我们要把某个字符串依据分隔符号拆分不同的字段,该字符串包含多种不同的分隔符,例如: s=’ab;cd|efg|hi,jkl|mn\topq ...