画布动画问题

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() 替换为canvas 2d api 中的基本 中风矩形()

第二次尝试使用变换而不是角度，您将获得更好的结果。

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

这里是我的 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)