Canvas, animated text rotation

问题

I want to have a animated canvas rotation of a word, while another word on the canvas does not move. But somehow both stand still. What do I have to change?

[link]http://jsfiddle.net/2dszD/8/

var canvas;
var ctx;
var canvasWidth;
var canvasHeight;
var interval = 10; 

function init(){

  canvas = document.getElementById("canvas");
  ctx = canvas.getContext('2d');
  canvasWidth = canvas.width;
  canvasHeight = canvas.height;


  setInterval(redraw, interval);
}

init();


function redraw() {

    ctx.clearRect(0, 0, canvasWidth, canvasHeight);

    ctx.translate( (200 ), (150 ) );
    ctx.rotate( 1*Math.PI/180 );

    ctx.fillStyle = '#f00';
    ctx.font = '40px san-serif';
    ctx.textBaseline = 'top';
    ctx.fillText("Hello rotated", 0, 0);

    ctx.rotate(-( 1*Math.PI/180 ));
    ctx.translate( -(200), -(150) );

    ctx.fillStyle = '#f00';
    ctx.font = '40px san-serif';
    ctx.textBaseline = 'top';
    ctx.fillText("Hello still", 0, 0);
}

回答1:

Actually, your text is rotated by a tiny 1.0 degree.

1*Math.PI/180 represents 1 tiny degree of rotation

So this would be a more noticeable 5 degrees:

ctx.rotate( 5.0  * Math.PI/180 );

A few coding glitches:

You need to increment the rotation angle so your text actually animates

angleInDegrees+=5;

ctx.rotate( angleInDegrees * Math.PI/180 );

setInterval requires a full function as an argument, not just a function name, like this:

setInterval( function(){redraw();}, interval);

And here’s easier way to handle translate/rotate

Instead of un-translating and un-rotating like this:

ctx.translate( (200 ), (150 ) );
ctx.rotate( 1*Math.PI/180 );

// draw stuff here

ctx.rotate(-( 1*Math.PI/180 ));
ctx.translate( -(200), -(150) );

You can instead context.save() and context.restore() which is cleaner and doesn’t require un-doing:

// save the canvas context—including its un-translated and un-rotated setting
ctx.save();

ctx.translate(200,150);
ctx.rotate( angleInDegrees * Math.PI/180 );

// draw stuff here

// after restore() the canvas is back to its starting position before save()
ctx.restore();

Here’s code and a Fiddle: http://jsfiddle.net/m1erickson/5XTcn/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvasWidth;
    var canvasHeight;
    var interval = 350; 
    var angleInDegrees=0;

    function init(){
      canvas = document.getElementById("canvas");
      ctx = canvas.getContext('2d');
      canvasWidth = canvas.width;
      canvasHeight = canvas.height;

      setInterval( function(){redraw();}, interval);
    }

    init();


    function redraw() {

        angleInDegrees+=5;

        ctx.clearRect(0, 0, canvasWidth, canvasHeight);

        ctx.beginPath();
        ctx.rect(200,150,5,5);
        ctx.fill();

        ctx.save();

        ctx.translate(200,150);
        ctx.rotate( angleInDegrees * Math.PI/180 );

        ctx.fillStyle = '#f00';
        ctx.font = '40px san-serif';
        ctx.textBaseline = 'top';
        ctx.fillText("Hello rotated", 0, 0);

        ctx.restore();

        ctx.fillStyle = '#f00';
        ctx.font = '40px san-serif';
        ctx.textBaseline = 'top';
        ctx.fillText("Hello still", 0, 0);
    }

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=500 height=300></canvas>
</body>
</html>

来源：https://stackoverflow.com/questions/16001389/canvas-animated-text-rotation

标签

html5

animation

canvas

rotation