畫布動畫問題

Question

我想旋轉圍繞畫布中間的方塊。但廣場看起來是靜態的。

// JScript source code 

var s_canvas; 
var s_context; 
var R = 70; 
var beta = 0; 
var Xs = R * Math.cos(beta); 
var Ys = R*Math.sin(beta); 
var WIDTH = 400; 
var HEIGHT = 300; 
var angle = 0; 
var tetha = 1.8 * Math.PI/180; 
var counterclockwise=true; 
var n = 4; 

function draw_square(c,n, x, y, r, angle, counterclockwise) { 

    c.fillStyle = "00ff00"; 
    c.beginPath(); 
    c.moveTo(x + r * Math.cos(angle), y - r * Math.sin(angle)); 

    var alpha=2*Math.PI/n; 

    for(var i=1;i<n;i++) 
    { 
     angle += alpha; 
     c.lineTo(x + r * Math.cos(angle), y - r * Math.sin(angle)); 
    } 
    c.closePath(); 

    c.fill(); 
} 

function clear_square() { 
    s_context.clearRect(0, 0, WIDTH, HEIGHT); 
} 

function init() { 
    s_canvas = document.getElementById("canvas_square"); 
    // Check if the canvas is supported and if the getContext is available 
    if (s_canvas && s_canvas.getContext) { 
     s_context = s_canvas.getContext("2d"); 
     return setInterval(draw, 10); 
    } 
    else { 
     alert("Canvas is not supported!"); 
    } 
} 

function draw() { 
    clear_square(); 
    s_context.save(); 
    s_context.translate(200, 150); 
    s_context.rotate(1.8 * Math.PI/180); 

    draw_square(s_context, n, Xs, Ys, 30, 0, true); 
    beta += tetha; 
    s_context.restore(); 


// Xs=R*Math.cos() 

} 

window.onload = init; 

Answer 1

首先，你可以取代你draw_square()從畫布2D API

第二次嘗試使用轉換，而不是角度，您將得到更好的結果基本strokeRect()。

這裏是我的意思http://jsfiddle.net/austinbv/EP794/

一個的jsfiddle這裏是我的JS這麼

// Start the Canvas 
c = $('canvas').get(0).getContext('2d'); 

//Set the center 
c.translate(100,100) 


function drawAndRotate() { 
//Clear the canvas 
    c.clearRect(-100,-100,200,200) 
//draw a square 
    c.strokeRect(-25,-25,50,50) 
//rotate the canvas 
    c.rotate(0.017) 
    } 

//do it alot 
setInterval(drawAndRotate, 100) 

我知道這是不是真的調試你的代碼，但它是一個更清潔的方式來獲得相同的結果。

編輯：

我剛纔看過了你的代碼多一點，你需要設置的時間間隔嘗試運行的最後一行window.onload.setInterval(init, 100)