ネイティブ js とキャンバスでシミュレートされた心電図コード共有
ネイティブ js+canvas を使用して作成された心電図シミュレーション用の html ページは、プロジェクトと一緒にパッケージ化されて github に配置されているため、実際には vue.js のシングル ページ モードを使用します。このデモが完了したら、このプロジェクトを一緒に解体しましょう。
1: ページ上にキャンバスを作成する ページ上で心電図の「線」を動かすには、キャンバスが必要です。プロジェクトは比較的単純なので、ページ上の DOM 要素はこれまでに書かれていますが、主な作業負荷は js 部分に集中しています
<p class="heartBeat"> <canvas id="can">Canvas画板</canvas> </p>
2: いくつかの変数を定義し、値を代入します。実行時
var can = document.getElementById('can'),//画布对象
pan,//获取2D图像API接口
index = 0,//用来接收setinerval的值
flag = true,//用来控制心电图折线的运行方向
wid = document.body.clientWidth,//获取浏览器宽度
hei = document.body.clientHeight,//获取浏览器高度
x = 0,//心电图的“点”在画布上的x轴坐标，从0开始
y = hei/2;//心电图的“点”在画布上的y轴坐标，从页面y轴居中位置开始3: キャンバスを初期化し、キャンバスにさまざまなプロパティを設定します
function start(){
can.height = hei;//设置画布高度
can.width = wid;//设置画布宽度
pan = can.getContext("2d");//获取2D图像API接口
pan.strokeStyle = "#08b95a";//设置画笔颜色
pan.lineJoin = "round";//设置画笔轨迹基于圆点拼接
pan.lineWidth = 9;//设置画笔粗细
pan.beginPath();//开始一条画笔的路径
pan.moveTo(x,y);//定位我们的“落笔点”
index = setInterval(move,1);//让我们的画笔动起来
};ご覧のとおり、ここではまだ「ペイント」アクションを行っていません。キャンバスのサイズを初期化しただけです。キャンバスを画面いっぱいにし、ブラシの色、太さ、ペンダウンポイントなどの操作を定義してから、setInterval メソッドを使用して、計算したルートに従ってブラシを連続的に移動させます。 setInterval メソッドに精通している方は、setInterVal の使用法をもう一度見てみることをお勧めします。 ECG を無限ループして自動的に実行したいため、ここでは start() 関数としてカプセル化します。これにより、ECG が画面の右端に移動したときに start() 関数を再実行して ECG を作成します。無限です
4. 心電図を動かしましょう！前の手順は難しくないと言えます。実際の中心となるコードは、心電図を動かし、希望するルートに沿って移動させることです。
function move(){
x++;//x轴是始终运动的，所以x一直自增
if(x < 100){
//前100px，我们不希望做垂直运动，让点只沿垂直方向运动即可，所以不做任何操作
}else{
if(x >= wid - 100){
//最后的100px，同样希望心电图只做水平运动，不会上下波动，所以不做任何操作
}else{
//为了让心电图看起来更加逼真，我们希望心电图在运动时每次的波峰和波谷都是随机的，这样更类似于人类的心跳，所以我们给它一个随机值z
var z = Math.random()*280;
if(y <= z){
//画布的坐标是从左上角开始计算的，也就是最左上角的点的坐标是（0,0）,y是当前画笔所在坐标的y轴，假如y小于z，就代表y已经到达波峰位置，准备开始向波谷运动
flag = true
}
if((hei - y) <= z){
//假如当前画笔在y轴的坐标y距离浏览器底部hei的差值已经小于随机值z，代表当前的画笔已经运行到波谷位置，准备转向波峰位置运动
flag = false
}
if(flag){
//假如flag为true，代表画笔仍然向波谷位置前进，需要花点功夫理解的是，因为画布左上角的点的坐标是（0,0），所以y的值越大，画笔在y轴的位置越靠近浏览器底部，所以向波谷运动时，y的值是不断增加的，同时为了让波峰波谷更陡峭，我这里设置y += 5，
y+=5
}else{
//假如flag为false，表示向波峰运动，y的值是不断减小的
y-=5
}
}
}
if(x == wid){
//当画笔运动到浏览器右侧边缘，停止绘图
pan.closePath();
//清除循环
clearInterval(index);
//将index置零，准备下一次循环
index = 0;
//重新定位画笔到屏幕左侧上下居中的位置
x = 0;
y = hei/2;
flag = true;
//重新进行下一次心电图的绘制
start();
}
//lineTo和stroke函数负责描绘运动轨迹
pan.lineTo(x,y);
pan.stroke();
}5: 注意すべき点。 、この時点で心電図を実際に実行できますが、身長を 100% に設定することに注意してください。そうしないと、キャンバスがページ全体を埋めることができない可能性があります
html,body{
width: 100%;
height: 100%;
margin: 0;
}完全なプロジェクト コード:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟心电图</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<p id="canvas">
<canvas id="can">Canvas画板</canvas>
</p>
<script src="js/vue.min.js"></script>
<script>
var can = document.getElementById('can'),
pan,
index = 0,
flag = true,
wid = document.body.clientWidth,
hei = document.body.clientHeight,
x = 0,
y = hei/2;
start();
function start(){
can.height = hei;
can.width = wid;
pan = can.getContext("2d");//获取2D图像API接口
pan.strokeStyle = "#08b95a";//设置画笔颜色
pan.lineJoin = "round";//设置画笔轨迹基于圆点拼接
pan.lineWidth = 9;//设置画笔粗细
pan.beginPath();
pan.moveTo(x,y);
index = setInterval(move,1);
};
function move(){
x++;
if(x < 100){
}else{
if(x >= wid - 100){
}else{
var z = Math.random()*280;
if(y <= z){
flag = true
}
if((hei - y) <= z){
flag = false
}
if(flag){
y+=5
}else{
y-=5
}
}
}
if(x == wid){
pan.closePath();
clearInterval(index);
index = 0;
x = 0;
y = hei/2;
flag = true;
start();
}
pan.lineTo(x,y);
pan.stroke();
}
/* */
</script>
</body>
</html>関連する推奨事項:
以上がネイティブ js とキャンバスでシミュレートされた心電図コード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7681
15
1639
14
1393
52
1286
25
1229
29
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法
Dec 17, 2023 pm 02:54 PM
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。
WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー
Dec 17, 2023 pm 05:30 PM
WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジー はじめに： インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築
Dec 17, 2023 pm 05:13 PM
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは
簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法
Jan 05, 2024 pm 06:08 PM
JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用
キャンバス フレームワークを学び、一般的に使用されるキャンバス フレームワークについて詳しく説明します
Jan 17, 2024 am 11:03 AM
Canvas フレームワークを探索する: 一般的に使用される Canvas フレームワークを理解するには、特定のコード例が必要です。 はじめに: Canvas は HTML5 で提供される描画 API であり、これを通じて豊富なグラフィックスやアニメーション効果を実現できます。描画の効率と利便性を向上させるために、多くの開発者がさまざまな Canvas フレームワークを開発しました。この記事では、一般的に使用される Canvas フレームワークをいくつか紹介し、読者がこれらのフレームワークの使用方法をより深く理解できるように、具体的なコード例を示します。 1.EaselJSフレームワークEa
ゲーム開発におけるキャンバスの強力な役割と応用を探る
Jan 17, 2024 am 11:00 AM
ゲーム開発におけるキャンバスの力と応用を理解する 概要: インターネット技術の急速な発展に伴い、Web ゲームはプレイヤーの間でますます人気が高まっています。 Web ゲーム開発の重要な部分として、キャンバス テクノロジーがゲーム開発に徐々に登場し、その強力なパワーと応用性を示しています。この記事では、ゲーム開発におけるキャンバスの可能性を紹介し、具体的なコード例を通じてその応用例を示します。 1. Canvas テクノロジの概要 Canvas は HTML5 の新しい要素で、これにより次のことが可能になります。
JavaScript で HTTP ステータス コードを簡単に取得する方法
Jan 05, 2024 pm 01:37 PM
JavaScript で HTTP ステータス コードを取得する方法の紹介: フロントエンド開発では、バックエンド インターフェイスとの対話を処理する必要があることが多く、HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータス コードとは何ですか? HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが
キャンバスコードを記述する場所
Dec 20, 2023 pm 03:17 PM
Canvas コードは、HTML ファイルの <body> タグ内に、通常は HTML ドキュメントの一部として記述できます。Canvas コードの核心は、Canvas 要素のコンテキストを取得して操作することです。Canvas 要素への参照が取得されます。 document.getElementById('myCanvas') を通じて、 getContext('2d') を使用して 2D 描画コンテキストを取得します。
