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. Vue 自定义指令实现权限控制（按钮级）

    在用户登陆后,根据用户id读取用户的所有权限数据,放入本地的sessionStorage进行存储(这里我是拿到权限按钮按钮的标识,英文名称.把他们合成一个字符串存储在 btnPowerString 中 ...

  2. --- rk3399/3288 系列平台接mipi 的dts 数据 panel-init-sequence = [] 命令的整法

    https://blog.csdn.net/Shushan1/article/details/87858434 mipi 屏的数据手册 dts sample: &dsi { status = ...

  3. EasyUI 1.3.2 中 Combobox自动检索 键盘上下选择Bug问题

    EasyUI 自带的Combobox控件,提供了下拉列值自动检索功能. 在用到的EasyUI 1.3.2版本中还是有点问题,在键盘上下键移动选择过程中只能定位在第一个,不能正常向下移动 问题解决方式: ...

  4. git取别名配置

    已经配置的别名 $ git config --global alias.st status $ git config --global alias.co checkout $ git config - ...

  5. Redis 哨兵节点之间相互自动发现机制（自动重写哨兵节点的配置文件）

    Redis的哨兵机制中,如果是多哨兵模式,哨兵节点之间也是可以相互感知的,各种搜索之后出来的是千篇一律的一个基础配置文件,在配置当前哨兵节点的配置文件中,并没有配置其他哨兵节点的任何信息.如下是一个哨 ...

  6. 2017-11-10 Fr Oct 消参

    2017-11-04 Sa $ P(-3, 0) $ 在圆C $ (x-3)^2 + y^2 = 8^2 $ 内,动圆M与圆相切且过P点,求M点轨迹. 设切点 $ A(a, b) $,圆心 \(M(x ...

  7. png 变透明

    using  System.Drawing Image image;    image = Image.FromFile("d:\\1.png");    Bitmap bitma ...

  8. Kickstart自动化安装平台

    PXE(preboot execute environment,预启动执行环境)是由Intel公司开发的最新技术,工作于Client/Server的网络模式,支持工作站通过网络从远端服务器下载映像,并 ...

  9. Jmeter Dash Report(HTML Report)删除Hits Per Second graph的方法

    通过命令行 Non GUI的方式执行jmeter的jmx脚本可以生成HTML Report(Dash Report). 这个report默认自带了很多种图表报告,比如statistics,Over t ...

  10. html入门第二天。

    二·1.图片与多媒体:-------------- img标签(重中之重): 网页中的图片展示就是用的img标签实现,img元素相网页中嵌入一幅图形,行内标签,单标签. 基础语句:<img sr ...