画布，动画文本旋转答案

【问题标题】：Canvas, animated text rotation画布，动画文本旋转
【发布时间】：2013-04-06 18:04:52
【问题描述】：

我想要一个单词的动画画布旋转，而画布上的另一个单词不动。但不知何故，两者都静止不动。我需要改变什么？

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);
}

【问题讨论】：

标签： html animation canvas rotation

【解决方案1】：

实际上，您的文本旋转了 1.0 度。

1*Math.PI/180 代表 1 个微小的旋转度数

所以这将是一个更明显的 5 度：

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

一些编码错误：

您需要增加旋转角度，以使您的文本真正具有动画效果

angleInDegrees+=5;

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

setInterval 需要完整的函数作为参数，而不仅仅是函数名，如下所示：

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

这是处理平移/旋转的更简单方法

而不是像这样不平移和不旋转：

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

// draw stuff here

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

您可以改为使用 context.save() 和 context.restore()，这样更简洁且不需要撤销操作：

// 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();

这是代码和小提琴：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>

【讨论】：

以下陈述是错误的：“setInterval 需要一个完整的函数作为参数，而不仅仅是一个函数名”。这在原始代码中可能看起来是正确的唯一原因是因为该函数是在引用之后定义的。