Google Closures Graphic 模块太慢了。 good.graphics.Canvas 图形答案

【问题标题】：Google Closure's Graphic module is too much slow. goog.graphics.CanvasGraphicsGoogle Closures Graphic 模块太慢了。 good.graphics.Canvas 图形
【发布时间】：2012-07-07 03:29:12
【问题描述】：

最近，我使用 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);    


}

【问题讨论】：

标签： performance html canvas google-closure

【解决方案1】：

也许很明显，但您是否尝试过使用高级编译？这将删除死代码并优化您的代码。请参阅https://developers.google.com/closure/compiler/docs/api-tutorial3 它可能会使性能可以接受...

问候，

雷内

【讨论】：

【解决方案2】：

您不应该在每次使用闭包库渲染帧时调用“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;
};

【讨论】：