원생 js+canvas 를 사용 하여 아 날로 그 심전도 의 인 스 턴 스 를 실현 합 니 다.
처음에 어 리 석 었 을 때 부터 지금까지 github 을 쓰 고 블 로 그 를 쓰기 시 작 했 습 니 다.사실은 기술적 으로 쓸 만 한 것 이 많 지 않 았 습 니 다.자신 도 이제 막 입문 을 했 기 때문에 자신의 취미 에 따라 재 미 있 는 작은 프로젝트 를 썼 다 고 할 수 있 습 니 다.프로젝트 에 존재 하 는 문제점 도 큰 신 이 지적 해 주 셨 으 면 좋 겠 습 니 다.현재 이 demo 의 기능 이 실현 되 었 고 후기 에 저 는 스타일,코드 등 을 최적화 하 다.
프로젝트 실행 효과:
프로젝트 소개:원생 js+canvas 로 제 작 된 아 날로 그 심전도 html 페이지 를 사용 합 니 다.프로젝트 와 함께 github 에 포장 되 어 있 기 때문에 vue.js 의 단일 페이지 모드 를 사 용 했 습 니 다.실제로 추가 프레임 워 크 와 스타일 을 사용 하지 않 아 도 이 demo 를 완성 할 수 있 습 니 다.이 프로젝트 를 함께 분해 합 시다!
1:페이지 에 canvas 캔버스 를 만 듭 니 다.심전도 의'선'이 우리 페이지 에서 움 직 여야 합 니 다.canvas 는 없어 서 는 안 됩 니 다.프로젝트 가 비교적 간단 하기 때문에 지금까지 페이지 의 DOM 요 소 는 이미 다 썼 고 주요 작업량 은 js 부분 에 집중 되 었 습 니 다.
<div class="heartBeat">
<canvas id="can">Canvas </canvas>
</div>
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
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);//
};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();
}
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>
<div id="canvas">
<canvas id="can">Canvas </canvas>
</div>
<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>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
