0

最近は、Google Closure を使った HTML Canvas の勉強をしています。

しかし、Google Closure のパフォーマンスは非常に遅いです。

コードを実行すると、Chrome ブラウザがほとんどクラッシュします。

もちろん、Google Closure を使用しない HTML Canvas コードでも同じことを行いました。超高速です。

Google Closure (goog.graphics.CanvasGraphics) を使用したキャンバス コードを次に示します。

私はこのモジュール (goog.graphics.CanvasGraphics) の初心者なので、正しく行ったかどうかはわかりません。私が何か間違ったことはありますか？なんでこんなに遅いの？？？？

イライラしすぎます。

/** 
 * @param {Document} doct
 */
test.main = function(doct){
var dom = new goog.dom.DomHelper(doct);

/**
 * goog.graphics.CanvasGraphics(width, height, opt_coordWidth, opt_coordHeight, opt_domHelper)
 * @type {goog.graphics.CanvasGraphics} 
 */
var canvas = new goog.graphics.CanvasGraphics(500, 500, null, null, dom);
canvas.render(dom.getElement('canvasTest2'))
canvas.balls = [];






 function  drawScreen () {
    canvas.clear()

    for (var i =0; i <canvas.balls.length; i++) {
        ball = canvas.balls[i];
        ball.x += ball.xunits;
        ball.y += ball.yunits;
        var ellipse = canvas.drawEllipse(ball.x, ball.y, ball.radius, ball.radius, null, ball.solidFill);


        if (ball.x > canvas.width || ball.x < 0 ) {
            ball.angle = 180 - ball.angle;
            updateBall(ball);
        } else if (ball.y > canvas.height || ball.y < 0) {
            ball.angle = 360 - ball.angle;
            updateBall(ball); 
        }
    }

}

function updateBall(ball) {

    ball.radians = ball.angle * Math.PI/ 180;
    ball.xunits = Math.cos(ball.radians) * ball.speed;
    ball.yunits = Math.sin(ball.radians) * ball.speed;

}

var numBalls = 80;
var maxSize = 15;
var minSize = 5;
var maxSpeed = maxSize+5;

for (var i = 0; i < numBalls; i++) {

    var tempRadius = Math.floor(Math.random()*maxSize)+minSize;
    var tempX = tempRadius*2 + (Math.floor(Math.random()*canvas.width)-tempRadius*2);
    var tempY = tempRadius*2 + (Math.floor(Math.random()*canvas.height)-tempRadius*2);
    var tempSpeed = maxSpeed-tempRadius;
    var tempAngle =  Math.floor(Math.random()*360);
    var tempRadians = tempAngle * Math.PI/ 180;
    var tempXunits = Math.cos(tempRadians) * tempSpeed;
    var tempYunits = Math.sin(tempRadians) * tempSpeed;

    var stroke = new goog.graphics.Stroke(3, '#333');
    var solidFill = new goog.graphics.SolidFill('#333');

    tempBall = {x:tempX,y:tempY,radius:tempRadius, speed:tempSpeed, stroke:stroke, solidFill:solidFill, angle:tempAngle, xunits:tempXunits, yunits:tempYunits}

    canvas.balls.push(tempBall);

}

setInterval(drawScreen, 32);    


}
4

2 に答える 2

3

クロージャ ライブラリでフレームをレンダリングするたびに「drawEllipse」を呼び出さないでください。要素が作成され、子としてキャンバスに追加されるためです。代わりに、楕円を一度作成してから、「forEachChild」関数を使用してそれらをループする必要があります。上記のコードのパフォーマンスはひどいものです。これは、ループごとにキャンバスの子がどんどん作成されるためです。

以下は、参照用の「drawEllipse」のコードです。

/**
 * Draw an ellipse.
 *
 * @param {number} cx Center X coordinate.
 * @param {number} cy Center Y coordinate.
 * @param {number} rx Radius length for the x-axis.
 * @param {number} ry Radius length for the y-axis.
 * @param {goog.graphics.Stroke} stroke Stroke object describing the
 *    stroke.
 * @param {goog.graphics.Fill} fill Fill object describing the fill.
 * @param {goog.graphics.GroupElement=} opt_group The group wrapper
 *     element to append to.  If not specified, appends to the main canvas.
 *
 * @return {goog.graphics.EllipseElement} The newly created element.
 * @override
 */
goog.graphics.CanvasGraphics.prototype.drawEllipse = function(cx, cy, rx, ry,
    stroke, fill, opt_group) {
  var element = new goog.graphics.CanvasEllipseElement(null, this,
      cx, cy, rx, ry, stroke, fill);
  this.append(element, opt_group);
  return element;
};
于 2013-03-25T01:09:03.647 に答える
0

非常に明白かもしれませんが、高度なコンパイルを使用して試しましたか? これにより、デッド コードが削除され、コードが最適化されます。https://developers.google.com/closure/compiler/docs/api-tutorial3を参照してください。これにより、パフォーマンスが許容できるようになる可能性があります...

よろしく、

レネ

于 2012-07-07T12:40:21.663 に答える