纯js 画圆的方法
2018-05-30 本文已影响19人
买买买买菜
1.给了两个点的坐标,怎样求两点连线的中点坐标?
设两个点是（x1,y1),(x2,y2)
那么两点连线的中点坐标是[（x1+x2)/2,(y1+y2)/2]
2.两点之间的距离计算公式？
两点的坐标是(x1,y1)和(x2,y2)
则两点之间的距离公式为 d=√[(x1-x2)²+(y1-y2)²]
3. 正玄值 余弦值 sin cos？
Math.sin(x) x 的正玄值。返回值在 -1.0 到 1.0 之间；
Math.cos(x) x 的余弦值。返回的是 -1.0 到 1.0 之间的数；
这两个函数中的X 都是指的“弧度”而非“角度”，弧度的计算公式为： 2PI/360角度；
30° 角度 的弧度 = 2PI/36030
4.如何得到圆上每个点的坐标？
根据三角形的正玄、余弦来得值；
假设一个圆的圆心坐标是(a,b)，半径为r，
则圆上每个点的X坐标=a + Math.sin(2Math.PI / 360) * r ；Y坐标=b + Math.cos(2Math.PI / 360) * r ；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>拖动画圆</title>
</head>
<body>
<style>
html,
body {
margin: 0px;
padding: 0px;
font-size: 12px;
}
#canvas {
width: 600px;
height: 500px;
margin: 20px auto;
border: 1px solid #00aa00;
background: #F8F8F8;
cursor: crosshair;
position: relative;
}
#canvas div {
position: absolute;
width: 1px;
height: 1px;
font-size: 1px;
line-height: 1px;
overflow: hidden;
background: #f00;
}
</style>
<div id="canvas"></div>
<script>
function circle(x, y, r) {
var html = [],
radio, xx, yy;
html.push("<div style='left:" + (x - 2) + "px; top:" + y + "px; width:5px;'></div>");
html.push("<div style='left:" + x + "px; top:" + (y - 2) + "px; height:5px;'></div>");
for (var i = 0.0; i < 360; i += 0.5) {
radio = i * Math.PI / 180;
xx = r * Math.cos(radio) + x;
yy = r * Math.sin(radio) + y;
html.push("<div style='left:" + xx + "px; top:" + yy + "px;'></div>");
}
return html.join("");
}
function Point(x, y) {
this.x = x || 0;
this.y = y || 0;
}
function getOffset(obj) {
var x = 0,
y = 0;
do {
x += obj.offsetLeft;
y += obj.offsetTop;
obj = obj.offsetParent;
} while (obj);
return new Point(x, y);
}
window.onload = function () {
var canvas = document.getElementById("canvas"),
origin, pt, offset, isClick = false,
r, neworigin;
offset = getOffset(canvas);
canvas.onmousedown = function (oEvent) {
oEvent = oEvent || event;
origin = new Point(oEvent.clientX - offset.x, oEvent.clientY - offset.y);
isClick = true;
};
document.onmousemove = function (oEvent) {
if (!isClick) {
return;
}
oEvent = oEvent || event;
pt = new Point(oEvent.clientX - offset.x, oEvent.clientY - offset.y);
neworigin = new Point((origin.x + (oEvent.clientX - offset.x)) / 2, (origin.y + (oEvent.clientY -
offset.y)) / 2);
r = Math.sqrt((pt.x - neworigin.x) * (pt.x - neworigin.x) + (pt.y - neworigin.y) * (pt.y -
neworigin.y));
canvas.innerHTML = circle(neworigin.x, neworigin.y, r);
};
canvas.onmouseup = function () {
isClick = false;
};
};
</script>
</body>
</html>
