js实现一条抛物线
Posted huyueshan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现一条抛物线相关的知识，希望对你有一定的参考价值。
抛物线运动解释：
以右开口为例，根据公式 y^2 = 2px 。确定p的值，已知x求y。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body style="width:100%; min-width:600px; height:100%; min-height:500px;">
<input id="btn" type="button" value="画抛物线" />
</body>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
window.onload = function(){
$("btn").onclick = function(){
let p=200;
//let x = 1000;//x的初值
let x=-300;
let myTimer = setInterval(function(){
x++;
if(x > 300){//x的结束值
//x是从大到小的变化
//根据x的值求y （根据公式:y^2=2px）x^2 = -2py
window.clearInterval(myTimer);
return;
}
// y= Math.sqrt(2*p*x);
// x = (y*y)/(2*p) +100;
y = (x*x)/(2*p) +200;
//用div模拟画个点（x,y为圆心，半径为2.5）
let divDom = document.createElement("div");
divDom.style.position = "absolute";
divDom.style.left = (x+320-2.5)+"px";
divDom.style.top = (y-2.5)+"px";
divDom.style.width = "5px";
divDom.style.height = "5px";
divDom.style.borderRadius = "50%";
divDom.style.backgroundColor= "red";
document.body.appendChild(divDom);
},5);//每隔5毫米画个点
}
}
</script>
</html>
以上是关于js实现一条抛物线的主要内容，如果未能解决你的问题，请参考以下文章