如何讓這個圈圍繞這個圈轉？
[英]How to make this circle revolve around this circle?
問題描述
- 我正在嘗試圍繞紅色圓圈移動藍色圓圈並僅使用紅色圓圈在 canvas 上繪制。
問題：
我無法理解如何在藍色圓圈圍繞紅色圓圈旋轉並同時移動時保持兩個圓圈的中心。
如何在圍繞紅色圓圈旋轉時僅使用紅色圓圈繪制而不繪制藍色圓圈。
const canvas = document.getElementById('canvas1'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; let positionX = 100; let positionY = 100; let X = 50; let Y = 50; let angle = 0; function circle(){ ctx.fillStyle = 'red'; ctx.beginPath(); ctx.arc(X, Y, 20, 0, Math.PI*2); ctx.closePath(); ctx.fill(); } function direction(){ ctx.fillStyle = 'blue'; ctx.beginPath(); ctx.arc(positionX, positionY, 10, 0, Math.PI*2); ctx.closePath(); ctx.fill(); } function animate(){ ctx.clearRect(0,0, canvas.width, canvas.height); circle(); direction(); positionX += 0.5 * Math.sin(angle); positionY += 0.5 * Math.cos(angle); angle += 0.1; requestAnimationFrame(animate); } animate();
#canvas1{ position: absolute; top:0; left: 0; width: 100%; height: 100%; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Canvas basics</title> <link rel="stylesheet" href="style.css"> </head> <body> <canvas id="canvas1"></canvas> <script src="script.js"></script> </body> </html>
2 個解決方案
解決方案1
1 2021-05-20 21:12:39
我沒有清楚地了解您的所有問題，但是要圍繞紅色旋轉藍色圓圈，您只需要正確設置值即可。
更新：在代碼注釋中添加了紅色圓圈的旋轉 + 次要描述。
const canvas = document.getElementById('canvas1'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Here we set our start positions of // circles. Keep in mind, that they will rotare not // around it's centers, they will START rotation path // from their centers let positionX = 30; let positionY = 59; let X = 70; let Y = 70; let angle = 0; let angle2 = 360; function circle(){ ctx.fillStyle = 'red'; ctx.beginPath(); ctx.arc(X, Y, 20, 0, Math.PI*2); ctx.closePath(); ctx.fill(); } function direction(){ ctx.fillStyle = 'blue'; ctx.beginPath(); ctx.arc(positionX, positionY, 10, 0, Math.PI*2); ctx.closePath(); ctx.fill(); } function animate(){ ctx.clearRect(0,0, canvas.width, canvas.height); circle(); direction(); // Basically you use geometry and math, // you can search for Sin and Cos online. // Here we calculate angle position on each frame // // Calc animation for first circle // It (animation path) starts from the center of circle and goes counterclockwise // And returns to its position after 360 deg. positionX += 4 * Math.sin(angle); positionY += 4 * Math.cos(angle); // Calc animation for second circle // Same as previous but with less amount // And our start position (angle2) is 360 X += 1 * Math.sin(angle2); Y += 1 * Math.cos(angle2); // Set angle of orbit - increase value each frame angle += 0.1; angle2 += 0.1; requestAnimationFrame(animate); } animate();
#canvas1{ position: absolute; top:0; left: 0; width: 100%; height: 100%; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Canvas basics</title> </head> <body> <canvas id="canvas1"></canvas> </body> </html>
解決方案2
1 已采納 2021-05-20 22:21:47
你的意思是這樣嗎？ - 我已將紅色圓圈設置為向右移動。 藍色圓圈軌道。
const canvas = document.getElementById('canvas1'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; let positionX = 100; let positionY = 100; let X = 50; let Y = 50; let angle = 0; function circle(){ ctx.fillStyle = 'red'; ctx.beginPath(); ctx.arc(X, Y, 20, 0, Math.PI*2); ctx.closePath(); ctx.fill(); } function direction(){ ctx.fillStyle = 'blue'; ctx.beginPath(); ctx.arc(positionX, positionY, 10, 0, Math.PI*2); ctx.closePath(); ctx.fill(); } function animate(){ ctx.clearRect(0,0, canvas.width, canvas.height); circle(); direction(); positionX = X + 35 * Math.sin(angle); positionY = Y + 35 * Math.cos(angle); X+=1; angle += 0.1; requestAnimationFrame(animate); } animate();
#canvas1{ position: absolute; top:0; left: 0; width: 100%; height: 100%; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Canvas basics</title> <link rel="stylesheet" href="style.css"> </head> <body> <canvas id="canvas1"></canvas> <script src="script.js"></script> </body> </html>
如何在整個圓中添加筆觸並設置動畫以在svg中旋轉圓？
[英]How to add stroke around whole circle and animate to rotate circle in svg?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.