围绕一个圆旋转一条线 [英] Rotating a line around a circle
问题描述
我有两个圆弧与笔触，我想有一个线之间的动画。
这里是我黑客一起，几乎是我想要的东西。
错误的事情是：
- 线的长度不是2圆之间的长度它围绕内圈旋转。
- 有时线条不垂直于内圈的点。
我在理解如何使用trig函数 lineTo 。也许是因为改变了线的长度，我不知道如何获得外圆的x和y坐标以获得线的终点。我习惯于做 math.cos * length ，这给了我一个角度的一条线。
window.onload = function（）{var canvas = document .getElementById（canvas）; var context = canvas.getContext（2d）;函数lineAtAngle（startX，startY，angleDeg，length，startX2，startY2，angleDeg2，length2）{var angle = angleDeg *（Math.PI / 180）; var angle2 = angleDeg2 *（Math.PI / 180）; // context.moveTo（startX，startY）; context.beginPath（）; context.moveTo（Math.cos（angle）* length + startX，Math.sin（angle）* length + startY）context.lineTo（Math.cos（angle2）*（length2）+ startX2，Math.sin（angle2）* （length2）+ startY2）// context.lineTo（canvas.width / 2 + 60，canvas.height / 2，angle2，length2）context.lineWidth = 10; context.stroke（）; context.closePath（）; console.log（startX2：+ startX2 +startY2：+ startY2）console.log（Math.sin（angle2）+ startY2）console.log（length）} function myLineTo（startX，startY，angleDeg，length）{ } var length1 = canvas.width / 2 + 60 - canvas.width / 2 -30 var length2 = canvas.width / 2; // var length2 = 1; console.log（length2）var angle1 = 0; var angle2 = 0; （function animate（）{context.clearRect（0,0，canvas.width，canvas.height）; window.requestAnimationFrame（animate）; context.beginPath（）context.arc（canvas.width / 2，canvas.height / 2 ，30,0,2 * Math.PI，true）context.lineWidth = 1; context.stroke（）context.beginPath（）; context.arc（canvas.width / 2，canvas.height / 2，60，0， 2 * Math.PI，true）; context.stroke（）; context.closePath（）context.beginPath（）; context.arc（canvas.width / 2，canvas.height / 2，3，0，2 * PI，true）context.fill（）context.closePath（）; angle1 ++ angle2 ++ // lineAtAngle（canvas.width / 2，canvas.height / 2，angle1，length1，canvas.width / 2 + 60，canvas.height / 2 ，angle2，length2）lineAtAngle（canvas.width / 2，canvas.height / 2，angle1，length1，canvas.width / 2 + 60，canvas.height / 2，angle2，length2）}（））}
canvas {background：#aaa; }
< canvas id =canvaswidth = 400height =400>< / canvas>
绘制线的想法是你需要提供一个起点（ moveTo ）和一个终点c $ c> lineTo ）。你当前的代码是复杂的整个事情与多个角度和长度。你想要想象的是，你正在做的是从圆的中心开始，然后添加一个偏移量，将起点放在内圆的边缘。使用trig在这里是完美的。您的线的长度将只是外半径减去内半径，与您的偏移方向相同（只需要一个角度）。
没有根本改变您的方法，下面的代码显示了您可以尝试使用的更改。让你的行函数取起点（x，y）和偏移量，以及角度和长度。起点是您的圆心，偏移是内圆的半径。长度（再次）只是外半径减去内半径。
window.onload = function（）{var innerCircleRadius = 30; var outerCircleRadius = 60; var canvas = document.getElementById（canvas）; var context = canvas.getContext（2d）; var angle1 = 0;函数lineAtAngle（startX，startY，angleDeg，offset，length）{var angle = angleDeg *（Math.PI / 180）; //转换为弧度。 var cosAngle = Math.cos（angle）; //只需要cos（angle）一次。 var sinAngle = Math.sin（angle）; //只需要sin（angle）一次。 var startXPos = cosAngle * offset + startX; var startYPos = sinAngle * offset + startY; var endXPos = cosAngle * length + startXPos; var endYPos = sinAngle * length + startYPos; context.beginPath（）; context.moveTo（startXPos，startYPos）; context.lineTo（endXPos，endYPos）; context.lineWidth = 10; context.stroke（）; context.closePath（）; （canvas.height / 2，canvas.height / 2，canvas.height） 2，innerCircleRadius，0，2 * Math.PI，true）context.lineWidth = 1; context.stroke（）context.beginPath（）; context.arc（canvas.width / 2，canvas.height / 2，outerCircleRadius，0 ，2 * Math.PI，true）; context.stroke（）; context.closePath（）context.beginPath（）; context.arc（canvas.width / 2，canvas.height / 2，3，0，2 * Math .PI，true）context.fill（）context.closePath（）; angle1 ++ lineAtAngle（canvas.width / 2，canvas.height / 2，angle1，innerCircleRadius，outerCircleRadius - innerCircleRadius）;}（））}
canvas {background：#aaa;}pre>< canvas id =canvaswidth =400height =400> ; / canvas>
I have two arcs with strokes and i want to have a line animate between them. The line should animate perpendicular to the points of the inner circle.
Here's something that I hacked together that is almost what I want.
things that are wrong with it are:
- the length of the line is not the length between the 2 circle as it revolves around the inner circle.
- sometimes the line is not perpendicular to the points of the inner circle. for example when it goes to the corner of the circle it tilts at an angle a little.
I had problem understanding how to use the trig function for lineTo. maybe because that changes the length of the line and I didn't know how to get the x and y coordinates of the outer circle to get the end point of the line. I'm used to doing math.cos * length and this gives me a line at an angle. I don't what a line I just wanted the coords of the outer circle.
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
function lineAtAngle(startX, startY, angleDeg, length, startX2, startY2, angleDeg2, length2){
var angle = angleDeg * (Math.PI / 180);
var angle2 = angleDeg2 * (Math.PI / 180);
// context.moveTo(startX, startY);
context.beginPath();
context.moveTo(
Math.cos(angle) * length + startX,
Math.sin(angle) * length + startY
)
context.lineTo(
Math.cos(angle2) *(length2 )+ startX2,
Math.sin(angle2) *(length2) + startY2
)
// context.lineTo(canvas.width / 2 + 60, canvas.height / 2, angle2, length2)
context.lineWidth = 10;
context.stroke();
context.closePath();
console.log("startX2: " + startX2 + " startY2: " + startY2 )
console.log(Math.sin(angle2) + startY2)
console.log(length)
}
function myLineTo(startX, startY, angleDeg, length){
}
var length1 = canvas.width / 2 + 60 - canvas.width / 2 -30
var length2 = canvas.width / 2 ;
// var length2 = 1;
console.log(length2)
var angle1 = 0;
var angle2 = 0;
(function animate(){
context.clearRect(0,0, canvas.width, canvas.height);
window.requestAnimationFrame(animate);
context.beginPath()
context.arc(canvas.width / 2, canvas.height / 2, 30, 0, 2 * Math.PI, true)
context.lineWidth = 1;
context.stroke()
context.beginPath();
context.arc(canvas.width / 2, canvas.height / 2, 60, 0, 2 * Math.PI, true);
context.stroke();
context.closePath()
context.beginPath();
context.arc(canvas.width / 2, canvas.height / 2, 3, 0, 2 * Math.PI, true)
context.fill()
context.closePath();
angle1++
angle2++
// lineAtAngle(canvas.width / 2 , canvas.height / 2 , angle1, length1, canvas.width / 2 + 60, canvas.height / 2, angle2, length2 )
lineAtAngle(canvas.width / 2 , canvas.height / 2 , angle1, length1, canvas.width / 2 + 60, canvas.height / 2, angle2, length2 )
}())
}
canvas{
background: #aaa;
}
<canvas id="canvas" width="400" height="400"></canvas>
The idea for drawing a line is that you need to supply a start point (moveTo), and an end point (lineTo). Your current code is complicating the whole thing with multiple angles and lengths. What you want to imagine you are doing is starting at the center of your circle, then adding an offset which places the start point at the edge of the inner circle. Using trig is perfectly fine here. The length of your line will simply be outer radius minus inner radius, in the same direction as your offset (only one angle was needed).
Without fundamentally changing your approach, the code below shows the changes you could use to try this. Have your line function take a starting point (x, y) and an offset, as well as the angle and length. The starting point is your circle center, and the offset is the radius of the inner circle. The length (again) is simply the outer radius minus the inner radius.
window.onload = function(){
var innerCircleRadius = 30;
var outerCircleRadius = 60;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var angle1 = 0;
function lineAtAngle(startX, startY, angleDeg, offset, length) {
var angle = angleDeg * (Math.PI / 180); // Convert to radians.
var cosAngle = Math.cos(angle); // Only need cos(angle) once.
var sinAngle = Math.sin(angle); // Only need sin(angle) once.
var startXPos = cosAngle * offset + startX;
var startYPos = sinAngle * offset + startY;
var endXPos = cosAngle * length + startXPos;
var endYPos = sinAngle * length + startYPos;
context.beginPath();
context.moveTo(startXPos, startYPos);
context.lineTo(endXPos, endYPos);
context.lineWidth = 10;
context.stroke();
context.closePath();
}
(function animate() {
context.clearRect(0,0, canvas.width, canvas.height);
window.requestAnimationFrame(animate);
context.beginPath()
context.arc(canvas.width / 2, canvas.height / 2, innerCircleRadius, 0, 2 * Math.PI, true)
context.lineWidth = 1;
context.stroke()
context.beginPath();
context.arc(canvas.width / 2, canvas.height / 2, outerCircleRadius, 0, 2 * Math.PI, true);
context.stroke();
context.closePath()
context.beginPath();
context.arc(canvas.width / 2, canvas.height / 2, 3, 0, 2 * Math.PI, true)
context.fill()
context.closePath();
angle1++
lineAtAngle(canvas.width / 2 , canvas.height / 2 , angle1, innerCircleRadius, outerCircleRadius - innerCircleRadius);
}())
}
canvas {
background: #aaa;
}
<canvas id="canvas" width="400" height="400"></canvas>
这篇关于围绕一个圆旋转一条线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
