Google Closure의 그래픽 모듈이 너무 느립니다. goog.graphics.CanvasGraphics

Question

최근에 Google Closure를 사용하여 HTML Canvas를 연구합니다.

하지만 Google Closure의 성능은 대단히 느립니다.

내 코드를 실행하면 Chrome 브라우저가 거의 다운됩니다.

물론 Google Closure를 사용하지 않는 HTML Canvas 코드에서 동일한 작업을 수행했습니다. 그것은 매우 빠릅니다. 나는이 모듈 (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);  


} 

Answer 1

아마도 매우 분명하지만 고급 편집을 사용 했습니까? 이렇게하면 데드 코드가 제거되고 코드가 최적화됩니다. 르네에게

감사합니다,

... 그것은 허용 성능을 만들 수도 https://developers.google.com/closure/compiler/docs/api-tutorial3 참조

Answer 2

이 요소를 만들고 추가하기 때문에 당신은 "drawEllipse에게"당신이 폐쇄 라이브러리와 프레임을 렌더링 할 때마다 호출해서는 안 그것은 캔버스에 아이로. 대신 타원을 한 번 작성한 다음 "forEachChild"기능을 사용하여 반복하십시오. 위 코드의 성능은 각 루프의 캔버스에 점점 더 많은 자식을 생성하기 때문에 끔찍합니다.

/** 
* 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; 
}; 

:

다음 참조 "drawEllipse"에 대한 코드