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. Webpack 使用url-loader和file-loader打包资源文件

    在js中不仅可以通过import引入js文件,还可以引入图片.视频等资源文件,这样webpack打包时就会把所引入的资源文件也一起打包进来 打包进来的文件会返回一个字符串:即文件的路径 要做到这一点, ...

  2. 地址栏输入url按回车发生了什么

    浏览器向DNS服务器(先查找缓存)查找输入URL对应的IP地址 DNS服务器返回对应的IP地址 浏览器根据IP地址与目标web服务器在80端口上建立TCP连接 浏览器获取请求页面的html代码 浏览器 ...

  3. 获取object的值

    class Program { static void Main(string[] args) { var data = Unite(); var name = data.GetType().GetP ...

  4. 程序员常用字体(vs2008字体修改方案)

    字体不仅是设计师手中重要的武器,对我们开发人员来说,字体的选择也有许多讲究,一个好的.适合展示代码的字体,应该具备以下要素: 等宽的字符 简洁.清晰并且规范的字符形状 支持ASCII码为128以上的扩 ...

  5. Build Tool/Maven, Gradle

    一.Build Tool 1.什么是Build Tool build tool是可以自动由源代码创建可执行的应用程序的程序. Building 包括编译.链接和打包代码成一个可用的或可执行形式. 在小 ...

  6. 产品大神1--工具axure

    一,axure安装 链接:https://pan.baidu.com/s/1rb3SH5HSogP1k_ARTZTflA 提取码:084p 二,axure8.0的使用 因为下面的文章都已经写的非常详细 ...

  7. 聚宽投资研究获取A股05年至今全部数据

    #用中正全指'000985.XSHG'获取全部A股数据pool=get_index_stocks('000985.XSHG') #date存储05年开始全部交易时间 date=get_price('0 ...

  8. 基于上三角变换或基于DFS的行（列）展开的n阶行列式求值算法分析及性能评估

    进入大一新学期,看完<线性代数>前几节后,笔者有了用计算机实现行列式运算的想法.这样做的目的,一是巩固自己对相关概念的理解,二是通过独立设计算法练手,三是希望通过图表直观地展现涉及的两种算 ...

  9. windows10安装JIRA

    windows10安装MySQL数据库 一.问题现象: cmd执行“mysql”命令,提示:ERROR 2003 (HY000): Can't connect to MySQL server on ' ...

  10. CSS的优先级和继承问题

    CSS的优先级和继承问题 ★CSS的冲突,即优先级 CSS本身的设置可以同时应用多个样式在同一个元素,此时样式之间可能出现冲突而达不到用户所想要的效果. ★解决CSS冲突的优先级规则: ● CSS层叠 ...