CODEWITHSUNDEEP
javascriptanimationcanvasrotationhtml5-canvas
MusicGirl
MusicGirl

Reputation: 143

Rotating animation in canvas

I'm trying to print "Buen trabajo" in the canvas and have the phrase spinning around the center origin. I'm not sure how to go about doing this. I tried to create a loop that increments bit by bit, but I think I'm missing something. 

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function drawGoodJob(){
    var counter = 60;//so the object won't run for more than 60 seconds
    var increment = 10;//amount to increment the canvas by
    while(counter<60){
    ctx.rotate(increment*Math.PI/180);
    increment+20;
    }
drawGoodJob();
ctx.font = "80px Verdana";

// Create gradient
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "green");

// Fill with gradient
ctx.strokeStyle = gradient;
ctx.strokeText("Buen trabajo", 150, 400);//strokeText makes the letters hollow
}
</script>

Upvotes: 0

Views: 8411

Answers (1)

programminganddrive
programminganddrive

Reputation: 21

I tried making reference to this post of StackOverflow.

HTML5 canvas animation and rotation

It may be different from the intended one, but will it be helpful?

<html>
<head>

</head>
<body>
<canvas id="testCanvas" width="800" height="600">

</canvas>

<script>
var rotation = 0;


(function init() {

    canvas = document.getElementById("testCanvas");
    context = canvas.getContext("2d");

    context.clearRect(0, 0, context.width, context.height);
    context.fillStyle = "lightblue";

    requestAnimationFrame(draw);

})();

function draw() {

    // reset transforms before clearing
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.clearRect(0, 0, canvas.width, canvas.height);

    // tramslate and rotate an absolute rotation value
    context.translate(canvas.width/2, canvas.height/2);
    context.rotate(rotation);

    context.font = "80px Verdana";
    // Create gradient
    var gradient = context.createLinearGradient(0, 0, canvas.width, 0);
    gradient.addColorStop("0", "magenta");
    gradient.addColorStop("0.5", "blue");
    gradient.addColorStop("1.0", "green");

    // Fill with gradient
    context.strokeStyle = gradient;
    context.strokeText("Buen trabajo",-250, 0);//strokeText makes the letters hollow

    // update rotation value and request new frame
    rotation += 0.04;

    requestAnimationFrame(draw)
}

</script>
</body>
</html>

Upvotes: 1

Related Questions