자 바스 크 립 트 시 뮬 레이 션 자유 낙하 효과 실현
1.효과 도
2.분석 실현
캔버스 를 이용 해 둥 근 공,바닥 그리 기;
1.낙하 과정
물리 지식 을 돌 이 켜 보면 물체 의 낙하 과정(손실 을 따 지지 않 음)은 중력 위치 에서 운동 에너지 로 바 뀔 수 있다.
중력 위치 에너지 ep=mgh
운동 에너지 Ek = (1/2)mv^2
속도 오른쪽 0 에서 lt 로 증가
브 라 우 저 가 렌 더 링 할 때마다 둥 근 공 y 좌 표를 계산 해 야 합 니 다.
y = (1/2)gt^2
2.반등 과정
운동 에너지 가 중력 위치 에너지 로 전환 하 다.
속 도 는 0 까지 점점 줄어든다.
이 설정 은 y=(1/2)g(t-t1)^2,t1 이 떨 어 지 거나 되 돌 리 는 데 걸 리 는 시간 입 니 다.
그러나 실제 나타 난 효 과 는 만 족 스 럽 지 못 하 다.반등 변위 계산 이 잘못 되 었 고 반복 적 으로 생각 한 결과 결과 결과 가 없 었 다.
그래서 떨 어 지 는 과정의 위 치 를 한 배열 에 저장 하고 반등 할 때 할당 값 을 하나씩 꺼 내기 로 했 습 니 다.
3.코드 구현
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
padding: 0;
margin: 0;
background-color: rgba(0, 0, 0, 1);
}
#canvas{
display: block;
margin: 10px auto;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="600">your browser is not support canvas</canvas>
<script type="text/javascript">
// H=(gt^2)/2 Ek=(mv^2)/2 :Ep = mgh
let x=300,y=60, //
minHeight = 60, //
maxHeight = 446, //
dir = true; //dir true ，false
(function(){
let canvas= document.getElementById('canvas');
let ctx = canvas.getContext('2d');
draw(ctx);
})();
function draw(ctx){
let currentTime = new Date().getTime(); // , currentTime
let arr_y = []; //
window.requestAnimationFrame(function init(){
if(dir){
if(y >= maxHeight){
dir = false;
currentTime = new Date().getTime();
}else{
y = y + Math.pow((new Date().getTime() - currentTime)/1000,2)*10/2;
arr_y.push(y);
}
}else{
if(y <= minHeight){
dir = true;
currentTime = new Date().getTime();
}else{
y = arr_y.splice(-1,1)[0] || 60;
}
}
drawArc(ctx,x,y);
requestAnimationFrame(init);
});
}
//
function drawArc(ctx,x,y){
ctx.clearRect(0, 0, 600, 600);
ctx.beginPath();
ctx.arc(x,y,50,0,Math.PI*2);
ctx.fillStyle='#98adf0';
ctx.fill();
ctx.save();
ctx.beginPath();
ctx.strokeStyle = '#ffffff';
ctx.moveTo(0,500);
ctx.lineTo(600,500);
ctx.lineWidth = 4;
ctx.stroke();
ctx.closePath();
ctx.save();
}
</script>
</body>
</html>간단 한 낙하 와 팝 업 이지 만 팝 업 변위 의 실현 을 위해 6 일 동안 걸 립 니 다.
주로 시 작 된 아이디어 가 계속 주목 되 고 있 습 니 다.
낙하 변위(개 구선 포물선 방정식)
y = (1/2)gt^2
사고 반등 의 위 치 는 포물선 을 x 축 을 따라 오른쪽으로 t1 을 옮 겨 야 한다.
y = (1/2)g(t-t1)^2
관심 있 는 학생 은 효 과 를 시험 해 볼 수 있다.
브 라 우 저 렌 더 링 반사 효과 가 만 족 스 럽 지 못 해서 계산 할 변위 방법 을 생각 하지 못 했 기 때문에 배열 을 사용 하여 이 루어 집 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
