php 心电图,用canvas画心电图的示例代码
这篇文章主要介绍了用canvas画心电图的示例代码的相关资料,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
本文介绍了用canvas画心电图的示例代码,分享给大家,具体如下:
效果图:
思路:
1.模拟点(如果你有真实的数据,那就是把数据幻化成canvas对应的坐标点)
模拟点时注意的点就是高起部分需要对称以及为了好看要随机出现上上下下
2.画线
画线需要注意有一个匀速移动的过程。
比如 A点到B点,不是简单的A画到B,而是A点到A1,A2....最后到B(这一块按照比例移动比较难)
3.画线的一些效果,比如加上阴影(这里就可以自由发挥了)具体代码
心电图
html,body{
width: 100%;
height: 100%;
margin: 0;
}
canvas{
background: #000;
width: 100%;
height: 100%;
}
var can = document.getElementById('can'),
pan,
index = 0,
flag = true,
wid = document.body.clientWidth,
hei = document.body.clientHeight,
x = 0,
y = hei/2,
drawX = 0,
drawY = hei/2,
drawXY = [],
cDrawX = 0,
i = 0,
reX = 0,
reY = 0;
start();
function start(){
can.height = hei;
can.width = wid;
pan = can.getContext("2d");
pan.strokeStyle = "white";
pan.lineJoin = "round";
pan.lineWidth = 6;
pan.shadowColor = "#228DFF";
pan.shadowOffsetX = 0;
pan.shadowOffsetY = 0;
pan.shadowBlur = 20;
pan.beginPath();
pan.moveTo(x,y);
drawXYS();
index = setInterval(move,1);
};
function drawXYS(){
if(drawX > wid){
}else{
if(drawY == hei/2){
if(flag){
flag = false;
}else{
var _y = Math.ceil(Math.random()*10);
_y = _y/2;
if(Number.isInteger(_y)){
drawY += Math.random()*180+30;
}else{
drawY -= Math.random()*180+30;
}
flag = true;
}
cDrawX = Math.random()*40+15;
}else{
drawY = hei/2;
}
drawX += cDrawX;
drawXY.push({
x : drawX,
y : drawY
});
drawXYS();
}
}
function move(){
var x = drawXY[i].x,
y = drawXY[i].y;
if(reX >= x - 1){
reX = x;
reY = y;
i++;
cc();
return;
}
if(y > hei/2){
if(reY >= y){
reX = x;
reY = y;
i++;
cc();
return;
}
}else if(y < hei/2){
if(reY <= y){
reX = x;
reY = y;
i++;
cc();
return;
}
}else{
reX = x;
reY = y;
i++;
cc();
return;
}
reX += 1;
if(y == hei/2){
reY = hei/2;
}else{
var c = Math.abs((drawXY[i].x-drawXY[i-1].x)/(drawXY[i].y-drawXY[i-1].y));
var _yt = (reX-drawXY[i-1].x)/c;
if(drawXY[i].y < drawXY[i-1].y){
reY = drawXY[i-1].y - _yt;
}else{
reY = drawXY[i-1].y + _yt;
}
}
cc();
}
function cc(){
if(i == drawXY.length){
pan.closePath();
clearInterval(index);
index = 0;
x = 0;
y = hei/2;
flag = true;
i = 0;
}else{
pan.lineTo(reX, reY);
pan.stroke();
}
}
总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问Html5视频教程!
相关推荐:
php 心电图,用canvas画心电图的示例代码相关推荐
- 心电图特效代码 html5,用canvas画心电图的示例代码
本文介绍了用canvas画心电图的示例代码,分享给大家,具体如下: 效果图: 思路: ?1.模拟点(如果你有真实的数据,那就是把数据幻化成canvas对应的坐标点) ? 模拟点时注意的点就是高起部分需 ...
- python画心电图_用canvas画心电图
效果图: 思路: 1.模拟点(如果你有真实的数据,那就是把数据幻化成canvas对应的坐标点) 模拟点时注意的点就是高起部分需要对称以及为了好看要随机出现上上下下 2.画线 画线需要注意有一 ...
- android 自定义心电图,手把手教你打造一个心电图效果View Android自定义View(示例代码)...
大家好,看我像不像蘑菇-因为我在学校呆的发霉了. 思而不学则殆 丽丽说得对,我有奇怪的疑问,大都是思而不学造成的,在我书读不够的情况下想太多,大多等于白想 ,所以革命没成功,同志仍需努力. 好了废话不 ...
- c语言程序小猪佩奇,使用canvas 代码画小猪佩奇(示例代码)
看不见我!!! functionFunPig() {varct=document.getElementById('myCanvas').getContext('2d'); ct.beginPath() ...
- 用php语句绘制圆锥,JS、canvas画一个圆锥实现代码
本文主要给大家讲解html中用canvas函数配合JS画出一个圆锥形的图形实例,有需要的朋友学习测试下吧,希望能帮帮助到大家. 以下是我们给大家分享是实例代码: 我的第一个 HTML 页面 const ...
- Python画折线图示例代码
Python画图 双折线图代码示例 import matplotlib.pyplot as plt import pandas as pd data = pd.read_excel(r'1.xlsx' ...
- 用php语句绘制圆锥,JS+canvas画一个圆锥实例代码_javascript技巧
本篇文章给大家讲解html中用canvas函数配合JS画出一个圆锥形的图形实例,canvas是html5中新增加的新属性,对HTML5中的canvas感兴趣的朋友学习测试下吧. 以下是我们给大家分享是 ...
- 1 canvas 画二维码
1,将网址转换为二维码并用canvas画到页面 效果 代码 <!--Created by Sukla on 2018/3/19.--> <!DOCTYPE html> < ...
- python程序、画一个笑脸_如何使用canvas画一个微笑的表情(代码示例)
本篇文章给大家带来的内容是关于如何使用canvas画一个微笑的表情(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实习期间让我用canvas画一个表情,比较简单,话不多说 ...
最新文章
- 虽被BERT碾压,但还是有必要谈谈BERT时代与后时代的NLP
- 江苏省三级偏硬试题样卷
- 获取预测模型在测试集中预测错误的数据样本
- cenots6 系统服务优化
- linuxmessage日志消失_某工的centos7 启动了rsyslog之后,日志/var/log/messages等都不产生日志了,都是空的。求大神解决!...
- 2016江苏计算机二级考试时间,2016年江苏计算机二级考试报名时间_无忧考网.pdf...
- 关于C++模版的连接错误问题
- SVN interrupted与already-locked 解决方法
- 利用Mac创建一个 IPv6 WIFI 热点
- python无法对存在交叉部分的图片进行识别_Python异常样本识别 交叉验证出现错误?...
- Struts里面的配置笔记
- MySQL_数据库表记录的操作
- Python进阶(八)Python中的关键字
- VMware vSphere 服务器虚拟化之二十七桌面虚拟化之View中使用Thinapp软件虚拟化
- 关于数据库死锁的检查方法
- SQLite数据库安装(windows)
- 了解 Web 服务规范: 第 7 部分:Web 服务业务流程执行语言
- 怎么样培育孩子的智慧[图]
- Java--Mac系统终端编译运行java文件
- 八边形类 Octagon