JavaScript画圆
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
JavaScript画圆⽤圆规画圆是分为以下三步
1. 确定圆⼼
2. 确定半径
3. 顺时针
⽤代码画圆：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{
width: 100px;
height: 100px;
background-color: black;
position: absolute;
}
#div2 div{
width: 5px;
height: 5px;
background-color: black;
position: absolute;
}
</style>
<script>
window.onload = function(){
var node = document.getElementById("div1");
var node2 = document.getElementById("div2");
//1、确定圆⼼
var X = 500;
var Y = 500;
var r = 200;
var i = 0; //转过的⾓度
setInterval(function(){
i++;
var radian = i * Math.PI / 180;
//计算当前物体应该在什么位置
var a = Math.sin(radian) * r;
var b = Math.cos(radian) * r;
node.style.left = X + a + 'px';
node.style.top = Y - b + 'px';
//不停创建div放在页⾯上去显⽰轨迹
var newNode = document.createElement("div");
newNode.style.left = node.offsetLeft + 'px';
newNode.style.top = node.offsetTop + 'px';
node2.appendChild(newNode);
}, 30);
}
</script>
</head>
<body>
<div id = 'div1'></div>
<div id = 'div2'></div>
</body>
</html>
1弧度 = Math.PI / 180。