CODEWITHSUNDEEP
javascriptcanvas
sainanky
sainanky

Reputation: 507

unable to rotate arrows around circles on a specific degree using canvas

I have an canvas on which i've created two circle's. the problem i am facing that both of the arrow are dependent on another if i will do changes on degree of inner circle's arrow then outer arrow also rotate from their position.i just want two circle and their corrosponding arrows which are independent from each others.enter image description here

<!DOCTYPE html>
<html>
<head>
<style>
    body{
        background: #666;
    }
    #canvas1{
        background: blue;
    }
</style>
<script>
function start(){
    start1();
    start2();
}



function start1() {   // inner circle
    var ctx = document.getElementById("canvas1").getContext("2d");

    var cx = 200;
    var cy = 200;
    var radius = 100;

    ctx.beginPath();  // inner circle creation
    ctx.arc(cx, cy, radius, 0, Math.PI * 2);
    ctx.stroke();

        var e = xy1(cx, cy, radius, 0 *(Math.PI/180));  //
        ctx.fillStyle = "#000000"
        ctx.translate(cx,cy);
        ctx.rotate(0 * (Math.PI/180));  // for arrow rotation
        ctx.translate(-cx,-cy);
        ctx.save();
        ctx.beginPath();  // generate inner arrow
        ctx.moveTo(e.x,e.y);
        ctx.lineTo(e.x + 0 ,e.y + 10);
        ctx.lineTo(e.x + 60 ,e.y + 10);
        ctx.lineTo(e.x + 60 ,e.y + 20);
        ctx.lineTo(e.x + 75 ,e.y + 0);
        ctx.lineTo(e.x + 60 ,e.y - 20);
        ctx.lineTo(e.x + 60 ,e.y - 10);
        ctx.lineTo(e.x + 0 ,e.y - 10);
        ctx.closePath();
        ctx.fill();
        ctx.restore();



}


function start2(){   // outer circle
    var ctx1 = document.getElementById("canvas1").getContext("2d");

    var cx2 = 200;
    var cy2 = 200;
    var radius2 = 120;

    ctx1.beginPath(); // outer circle creation
    ctx1.arc(cx2, cy2, radius2, 0, Math.PI * 2);
    ctx1.stroke();


        var f = xy2(cx2, cy2, radius2, 0 *(Math.PI/180));
        ctx1.fillStyle = "#000000"
        ctx1.translate(cx2,cy2);
        ctx1.rotate(90 * (Math.PI/180)); // for arrow rotation
        ctx1.translate(-cx2,-cy2);
        ctx1.save();
        ctx1.beginPath(); // generate arrow
        ctx1.moveTo(f.x2,f.y);
        ctx1.lineTo(f.x2 + 0 ,f.y2 + 10);
        ctx1.lineTo(f.x2 + 60 ,f.y2 + 10);
        ctx1.lineTo(f.x2 + 60 ,f.y2 + 20);
        ctx1.lineTo(f.x2 + 75 ,f.y2 + 0);
        ctx1.lineTo(f.x2 + 60 ,f.y2 - 20);
        ctx1.lineTo(f.x2 + 60 ,f.y2 - 10);
        ctx1.lineTo(f.x2 + 0 ,f.y2 - 10);
        ctx1.closePath();
        ctx1.stroke();
        ctx1.restore();
}
function xy1(cx, cy, radius, radianAngle) {  // for inner circle
        var x = cx + radius * Math.cos(radianAngle);
        var y = cy + radius * Math.sin(radianAngle);
        return ({
            x: x,
            y: y
        });
    }
function xy2(cx2, cy2, radius2, radianAngle2) { // for outer circle
        var x2 = cx2 + radius2 * Math.cos(radianAngle2);
        var y2 = cy2 + radius2 * Math.sin(radianAngle2);
        return ({
            x2: x2,
            y2: y2
        });
    }

window.onload=start;
</script>


</head>

<body>
  <canvas id="canvas1" width=400 height=400></canvas>

</body>

</html>

Upvotes: 2

Views: 168

Answers (1)

Syntac
Syntac

Reputation: 1777

You are simply not saving your context before rotating. Save already before you apply any transformation.

    ctx1.save();    //save first
    ctx1.translate(cx2,cy2);
    ctx1.rotate(90 * (Math.PI/180)); // for arrow rotation
    ctx1.translate(-cx2,-cy2);

    ctx1.beginPath(); // generate arrow
    ctx1.moveTo(f.x2,f.y);
    ctx1.lineTo(f.x2 + 0 ,f.y2 + 10);
    ctx1.lineTo(f.x2 + 60 ,f.y2 + 10);
    ctx1.lineTo(f.x2 + 60 ,f.y2 + 20);
    ctx1.lineTo(f.x2 + 75 ,f.y2 + 0);
    ctx1.lineTo(f.x2 + 60 ,f.y2 - 20);
    ctx1.lineTo(f.x2 + 60 ,f.y2 - 10);
    ctx1.lineTo(f.x2 + 0 ,f.y2 - 10);
    ctx1.closePath();
    ctx1.stroke();
    ctx1.restore();     //and restore in the end (as you already did)

Upvotes: 1

Related Questions