看看这张照片:
我知道p1,p2和中心,它们是2d点。 我也知道角度p1-center-p2和半径r。
如何使用画布'function arc()?
绘制弧的填充部分修改
我真正需要做的是,给定2个点和一个角度,在这两个点之间绘制一条曲线,使得p1-center-p2角度是给定的角度。
我所做的是计算其中包含2个点的圆周的中心和半径,现在我需要绘制连接p1和p2并具有给定角度的线。 这是我计算环球中心(功能正常)的函数
function getCenter(v0x, v0y, v1x, v1y, curve) {
// result = p0
resx = parseFloat(v0x);
resy = parseFloat(v0y);
// tmpvec = (p1 - p0) * .5
tmpx = (v1x - v0x) / 2;
tmpy = (v1y - v0y) / 2;
// result += tmpvec
resx = resx + tmpx;
resy = resy + tmpy;
// rotate 90 tmpvec
tmptmpx = tmpx;
tmptmpy = tmpy;
tmpy = -tmptmpx;
tmpx = tmptmpy;
// tmpvec *= 1/tan(c/2)
tmpx *= 1/Math.tan(curve/2);
tmpy *= 1/Math.tan(curve/2);
// return res + tmpvec
return [resx+tmpx, resy+tmpy];
}
答案 0 :(得分:2)
函数atan2(y,x)有助于计算圆中点的角度。
function drawArcPart(cx, cy, radius, p1x, p1y, angle) {
var x = p1x - cx;
var y = p1y - cy;
var startAngle = Math.atan2(y,x);
var endAngle = startAngle - angle;
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle='black';
ctx.beginPath();
ctx.arc(cx, cy, radius, startAngle, endAngle, true);
ctx.fill();
}
我已将此JavaScript上传到jsFiddle,其扩展程序也会绘制点,以及您的示例。
答案 1 :(得分:1)
试试这个
<html>
<head></head>
<body onload="drawShape();">
<div>
<canvas id="tutorial" width="150" height="200"></canvas>
</div>
<SCRIPT type="text/javascript">
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById('tutorial');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
var x = 100; // x coordinate
var y = 100; // y coordinate
var radius = 100; // Arc radius
var startAngle = (Math.PI)-((Math.PI)/4); // Starting point on circle
var endAngle = (Math.PI)+((Math.PI)/4); // End point on circle
ctx.arc(x,y,radius,startAngle,endAngle, false);
ctx.fill();
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</SCRIPT>
</body>
</html>
的修改示例
结果是here
这是你想要的吗?