I want to spin a circle around a triangle using canvas. Have this code from earlier, but here is the circle in the middle, and a rectangle spinning, i want the circle to spin and have a triangle in the middle. Can someone help?
Here is the JS code i have:
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var cx = 100; var cy = 100; var rectWidth = 15; var rectHeight = 10; var rotation = 0; requestAnimationFrame(animate); function animate() { requestAnimationFrame(animate); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(cx, cy, 10, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); ctx.save(); ctx.translate(cx, cy); ctx.rotate(rotation); ctx.strokeRect(-rectWidth / 2 + 20, -rectHeight / 2, rectWidth, rectHeight); ctx.restore(); rotation += Math.PI / 180; }
<canvas id="canvas"></canvas>
I have edited your code to draw the requested shapes and added comments to describe, what i am doing in the snippet below.
var canvas = document.body.appendChild(document.createElement("canvas")); var ctx = canvas.getContext("2d"); var cx = 100; var cy = 100; var rotation = 0; requestAnimationFrame(animate); function animate() { //Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height); //Draw center figure /* ctx.beginPath(); ctx.arc(cx, cy, 10, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); */ ctx.beginPath(); ctx.moveTo(cx - 10, cy - 10); ctx.lineTo(cx, cy + 10); ctx.lineTo(cx + 10, cy - 10); ctx.closePath(); ctx.fill(); //Rotate canvas ctx.save(); ctx.translate(cx, cy); ctx.rotate(rotation); //Draw rotating object /*ctx.strokeRect(-rectWidth / 2 + 20, -rectHeight / 2, rectWidth, rectHeight);*/ ctx.beginPath(); ctx.arc(20, 0, 5, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); //Rotate canvas back ctx.restore(); //Save rotation rotation += Math.PI / 180; //Request next frame requestAnimationFrame(animate); }
It sounds like you lack experience with HTML Canvas
manipulation, so i would like to recommend some MDN's official canvas tutorial .
If you have further questions feel free to open new questions with more code-specific problems in the future.
Here is an alternative to moving objects without using the ctx.translate
or the ctx.rotate
We can use Math.sin
and Math.cos
to move around in a circular or elliptical motion.
Once you understand this approach you open the door for many possibilities, for example you can make the spins relative to other objects.
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var rotation = 0; setInterval(animate, 10); function animate(rx, ry, speed) { ctx.clearRect(0, 0, canvas.width, canvas.height); draw(120, 80, 1) draw(240, 80, 10/3) } function draw(rx, ry, speed) { var x = Math.cos(rotation) * 50 + rx var y = Math.sin(rotation) * 50 + ry ctx.beginPath() ctx.arc(x, y, 20, 0, Math.PI * 2); ctx.stroke(); for (var i = 1; i < 8; i++) { x += Math.sin(rotation * i/speed) * 20 y += Math.cos(rotation * i/speed) * 20/i ctx.beginPath() ctx.arc(x, y, 8/i, 0, Math.PI * 2); ctx.stroke(); } rotation += Math.PI / 180; }
<canvas id="canvas" height=170 width=400></canvas>
Try the following:
<code>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cx=100;
var cy=100;
var rectWidth=15;
var rectHeight=10;
var rotation=0;
requestAnimationFrame(animate);
function animate(){
requestAnimationFrame(animate);
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
var radius = 8;
ctx.moveTo(cx - radius, cy + radius);
ctx.lineTo(cx, cy - radius);
ctx.lineTo(cx + radius , cy + radius);
ctx.lineTo(cx - radius, cy + radius);
ctx.fill();
ctx.save();
ctx.translate(cx,cy);
ctx.rotate(rotation);
ctx.strokeRect(-rectWidth/2+20,-rectHeight/2,rectWidth,rectHeight);
ctx.restore();
rotation+=Math.PI/180;
}
</code>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.