0
124
ViewsJavascript canvas. How to animate a drawn object to rotate clockwise or anti clockwise until it's pointing to the direction of a given coordinate?
Please have a look at code snippet below. I need to rotate the white ball in animation until it is pointing to the direction of yellow circle. Ideally it should rotate clockwise or anti clockwise according to which side is nearer.
var ctx = mycanvas.getContext("2d"),
pWidth = 14,
p1 = {
x: 100,
y: 100
},
p2 = {
x: 300,
y: 400
},
ball = {
x: p1.x + pWidth,
y: p1.y
};
function drawCircle(x, y, w, color) {
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, w, 0, 2 * Math.PI);
ctx.fill();
}
function drawObjs() {
ctx.clearRect(0, 0, mycanvas.width, mycanvas.height);
drawCircle(p1.x, p1.y, pWidth, "blue");
drawCircle(ball.x, ball.y, 6, "white");
drawCircle(p2.x, p2.y, pWidth, "yellow");
}
setInterval(drawObjs(), 1000);<head>
<style>
#mycanvas {
border: solid 10px #060;
}
</style>
</head>
<body style="text-align:center">
<canvas id="mycanvas" width="640" height="480" style="background-color:green"></canvas>
</body>
<script>
</script>Like this
·
Juan Pablo Isaza
Answer question