canvas animation problem

I would like to rotate the square around the middle of the canvas. But the square looks static.

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

开发者_如何学Pythonfunction 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;

First you can replace your draw_square() with a basic strokeRect() from the canvas 2d api

Second try using transformations instead of the angles you will get better results.

Here is a jsfiddle of what I mean http://jsfiddle.net/austinbv/EP794/

And here is my JS for SO

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

I know this isn't really debugging your code but it is a much cleaner way to get the same result.

Edit:

I just looked over your code a little more and you need to set an interval try running the last line window.onload.setInterval(init, 100)