1

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

[链接] 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);
}
4

1 回答 1

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>
于 2013-04-14T17:16:49.943 回答