проблема анимации холста

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() базовым strokeRect() из холста 2d api

Во второй попытке использовать преобразования вместо углов, вы получите лучшие результаты.

Здесьjsfiddle из того, что я имею в виду http://jsfiddle.net/austinbv/EP794/

А вот мой JS для 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)

Я знаю, что это на самом деле не отладка вашего кода, но это гораздо более чистый способ получитьтот же результат.

Редактировать:

Я просто просмотрел ваш код немного больше, и вам нужно установить интервал, попробуйте запустить последнюю строку window.onload.setInterval(init, 100)