畫布，動畫文字旋轉

我想要一個單詞的動畫畫布旋轉，而畫布上的另一個單詞不會移動。但不知怎的，兩人都停下來。我需要改變什麼？畫布，動畫文字旋轉

[鏈接]

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

來源

2013-04-14 poppel

其實，你的文字是由微小的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-14 17:16:49 markE

非常感謝你，尋找答案和解釋好！ – poppel

以下語句爲false：「setInterval需要一個完整的函數作爲參數，而不僅僅是一個函數名稱」。在原始代碼中這可能看起來是正確的唯一原因是因爲該函數在被引用之後被定義。 –

畫布，動畫文字旋轉

回答

相關問題