На JavaScript холст анимация замедляется и коробления памяти


Я экспериментировал с движущимися фигурами на JavaScript с холст тега.

У меня одного половина круга (только гладила), который вращается на установленные интервалы времени.

Я написал код так много еще можно добавить. Я могу дать начиная вращения и много других полезных параметров.

Я попытался это с двенадцати кругов, и это выглядит точно так, как я хочу. Проблема в том, что анимация тормозит и частота кадров падает довольно быстро. И он использует кучи и кучи памяти. Любые идеи о том, как оптимизировать этот код, чтобы не потреблять так много?

Демо: http://jsfiddle.net/xaddict/fLE8z/

JS код:

var kin;
var canvas;
var context;
var pi = Math.PI;
var linearSpeed = 0.5*pi; // pixels / second
var linearDistEachFrame;
var myCircle;

function Circle(x, y, rot, radius, borderWidth, strokestyle){
    this.x = x;this.y = y;
    this.radius = radius;
    this.borderWidth = borderWidth;
    this.rot = rot
    this.goalrot = rot;
    this.strokestyle = strokestyle;
}

function randomizeThis(object){
    object.goalrot += pi;
}

function updateCircle(object){
    if(object.goalrot > object.rot){ //if goal rotation is bigger than current rotation
        object.rot += linearDistEachFrame;
    }else{ // if goal rotation is equal or smaller than current
            if(object.goalrot >= 2* pi){object.goalrot -= 2* pi;}
            object.rot = object.goalrot;
    }
}

function drawCircle(object){
    context.beginPath();
  context.arc(object.x, object.y, object.radius, object.rot, object.rot+pi, false);
  context.fillStyle = "none"; context.fill();
  context.lineCap = "round";
  context.lineWidth = object.borderWidth;
  context.strokeStyle = object.strokestyle;context.stroke();
}

function drawCirc(context,x,y,radius,clip){
    context.beginPath();
    context.arc(x,y,radius, 0, 2*pi, false);
    if(clip == true){context.clip();}
}

window.onload = function(){
    kin = new Kinetic_2d("canvas");
    canvas = kin.getCanvas();
    context = kin.getContext();

    myCircle =         new Circle(421,320,1.0*pi,    153,    12,"#FAA61A");//FAA61A

    kin.setDrawStage(function(){
        //update
        linearDistEachFrame = linearSpeed * kin.getTimeInterval() / 1000;
        updateCircle(myCircle);

        //clear
        kin.clear();

        //draw
        context.save();
        drawCirc(context,281,222,58,true);
        drawCircle(myCircle);
        context.restore();
    });

    kin.startAnimation();

    setTimeout(function(){randomizeThis(myCircle);setInterval("randomizeThis(myCircle)",4000);clearTimeout(this);},6000);
};

Спасибо за помощь!



Комментарии
1 ответ

Нет необходимости пересчитывать linearDistEachFrame во время каждого обновления. Возможно, вы хотите предварительно рассчитать 2 * математика.Пи так же.

2
ответ дан 2 ноября 2011 в 05:11 Источник Поделиться

Другие вопросы по теме
Карусель с разделами и анимированные фоновые изображения
31 октября 2011 в 08:10
Объединить два массива классов
30 октября 2011 в 05:10