Question

我的画布上有一个圆圈，我试图根据任何给定的度数从中心到外边缘画一条线。我的圆心位于（110,115），半径为100。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.arc(110, 150, 100, 0, 2*Math.PI); //Circle

我使用PHP获取输入并使用此

进行计算

$x = 110 + 100 * cos($degrees);
$y = 150 + 100 * sin($degrees);

这将始终将线的末端放在圆的外边缘，但它不会将其放在圆圈的正确位置。

我以90美元的价格输入了90美元，这条直线应该是正确的，但是往下走到左边。

circle http://oi60.tinypic.com/10i80v6.jpg

我搜索过高低，但没有找到任何人试图在画布上做这个。我做错了什么？

编辑：

我将计算更改为

$x = 110 + 100 * cos($degrees*pi()/180);
$y = 150 + 100 * sin($degrees*pi()/180);

它将右边的中心边缘视为0度，但我希望0在顶部。

Answer 1

画布中的90°是直线向下，而0°是正确的，所以你必须补偿它。

要向上0°，只需交换 cos 和 sin 并减去y：

$x = 110 + 100 * sin($degrees * 3.14159 / 180);
$y = 150 - 100 * cos($degrees * 3.14159 / 180);

var ctx = document.querySelector("canvas").getContext("2d");
var cx = 75, cy = 75, angle = 90;

var x = cx + 75 * Math.sin(angle * Math.PI / 180);
var y = cy - 75 * Math.cos(angle * Math.PI / 180);

ctx.arc(cx, cy, 74, 0, Math.PI*2);
ctx.moveTo(cx, cy);
ctx.lineTo(x, y);
ctx.stroke();

<canvas/>

根据html5画布上的度数，在圆的外边缘找到x，y坐标

1 个答案: