HTML5 캔버스에서 디자인하기 - 렌더링 속도를 높이는 방법

그래서 HTML5 캔버스에서 디자인을 렌더링하는 것이 매우 빠르다는 인상을 받았습니다. 다음 코드를 사용하고 있는데 렌더하는 데 1 초도 채 걸리지 않을 것이라고 생각하지만 약 2 분이 걸립니다.HTML5 캔버스에서 디자인하기 - 렌더링 속도를 높이는 방법

코드는 :

<script> 
var canvas = document.getElementById("canvas") 
    ctx = canvas.getContext('2d') 
    maxW = window.innerWidth 
    maxH = window.innerHeight 
    x = -1 
    numLeft = 15 

//maxW = 300 
//maxH = 300 
canvas.setAttribute("width", maxW) 
canvas.setAttribute("height", maxH) 
ctx.fillStyle = "rgba(0,0,0,.5)" 

for(var j = 0; j < maxH; j++){ 
    for(var i = 0; i < maxW; i++){ 
    if(numLeft < 0){ 
     if(x == -1){ 
     ctx.fillStyle = "rgba(127,127,127,.5)" 
     //numLeft += 12 
     numLeft += 5 
     } 
     else{ 
     ctx.fillStyle = "rgba(0,0,0,.5)" 
     //numLeft += 24 
     numLeft += 15 
     } 
     x *= -1 
    } 
    ctx.fillRect(i,j,i+1,j+1) 
    numLeft-- 
    } 
    //numLeft -= 5 this one's crazy :D 
    numLeft -= 3 
}

는 검은 색과 회색에 대각선 줄무늬를 그려하기로했다. 그러나 다시 말하자면, 영원히 렌더링을하고 있으며 대부분의 사람들의 브라우저를 망칠 것입니다. 이 속도를 높이는 방법에 대한 힌트가 있습니까?

출처

2012-01-01 Feng Huo

당신이 의도했는지 모르겠지만'drawRect (x, y, 1, 1)'이 한 픽셀을 채우고 있습니다. 그것은'(x, y, w, h)'입니다. 이것은 당신이 현재 많은 * 더 많은 픽셀 (너비'i + 1'과 높이'j + 1')을 그리기 때문에 빠른 속도 향상을 가져옵니다. 그래서 당신이 페인팅하는 픽셀의 양은 2 차적으로 커집니다. – pimvdb

동의,이 jsFiddle의 차이점을 확인할 수 있습니다. http://jsfiddle.net/luisperezphd/eY82y/ –

내가 아는 한 답변을 답변으로 받아 들일 수 없으므로 답변으로 @pimvdb comment를 게시하고 있습니다. 문제는 fillRect()이 호출되는 방식이었습니다. 실제로 매개 변수가 좌표와 치수의 조합 인 경우 일 때 모든 매개 변수가 좌표 (x, y, x2, y2) 인 것처럼 호출되었습니다.

이 코드가 this jsFiddle 인 코드에서 주요 성능 문제임을 확인했습니다.

앞서 언급했듯이 사전 렌더링 및 선 그래디언트와 같은 다른 성능 향상 기능이 있지만 성능 문제가 즉시 해결됩니다. 크롬 테스트에서 6 초에서 1 초 미만으로 성능이 향상되었습니다.

performance suggests on html5rocks.com을 사용해 보셨습니까?

출처

2012-01-01 01:19:01

아니요. (그 제안입니다.) –

Hey @JaredFarrish 개선 사항은 일반적으로 그래픽 프로그램에서 볼 수있는 것과 거의 같은 개선점입니다. 예를 들어 같은 것을 여러 번 다시 랜더링하는 대신 자신의 캔버스에 한 번 렌더링 한 다음 캔버스를 대상 캔버스에 여러 번 그립니다. 이것이 실제로이 문제에 사용될 수있는 기법입니다. 한 번에 모든 도면 명령을 보내는 것과 같은 본질적 그룹화와 같은 다른 유사한 조언이 있습니다. –

픽셀 기반 작업은 각 픽셀을 통과하여 색상을 지정해야하기 때문에 거의 항상 비싸다 (1000x1000 크기 → 1 000 000, 백만 픽셀, !!!). 디자인이 어떻게 보이는지 알고있을 때 항상 성능을 최적화 할 수있는 방법을 찾아야합니다. 더 넓은 줄무늬의 색상을 캔버스에 채우고 변경해야하는 픽셀을 반복하여 예제를 향상시킬 수 있습니다 (maxH 및 maxW은 내부 윈도우가 아니라 캔버스의 크기 임).

훨씬 간단하고 빠른 방법은 실제로 moveTo 및 lineTo 명령을 사용하여 선을 그리는 것입니다.

출처

2012-01-01 14:06:43 batzkoo

HTML5 캔버스에서 디자인하기 - 렌더링 속도를 높이는 방법

답변

관련 문제