페인트와 비슷한 웹 응용 프로그램을 만들고 있습니다. 지금 직면하고있는 문제는 드로잉 알고리즘이 너무 느리다는 것입니다. 기본적으로 mousemove 이벤트로 기록 된 연속 픽셀 사이에 직선을 그립니다.html 5 캔버스 드로잉이 느립니다!
html 5 캔버스를 사용하여 사용자가 만든 선과 곡선을 그릴 수있는 더 스마트 한 방법이 있습니까?
EDIT : 이미 캔버스에있는 획을 다시 그리는 경우에만 속도가 매우 느립니다.
브라우저의 하드웨어 가속으로 인해 느린 속도 (정확하게 느린 속도, 느리게로드되는 속도 또는 렌더링 속도가 느림)가 발생할 수 있습니다. 브라우저/OS는 무엇입니까? OS X의 Safari 5와 Windows 7의 IE9는 하드웨어 가속 때문에 가장 빠른 속도를 나타냅니다. 크롬에서는 about : 플래그로 켜야 할 것입니다. 조금 까다 롭습니다.
느린 유일한 시간은 사용자가 한 획을 다시 그리려 할 때입니다. 예를 들어 사용자가 캔버스에 50 개의 선을 그리고 캔버스를 지우고 50 개의 모든 선을 다시 그리기를 원합니다. – fogy
개념적으로하고 싶은 것은 엄청나게 빨라야합니다. 당신이 우리에게 여기에 코드를 제공하지 않습니다 때문에이 빠른 경우
를 시작 지점으로 사용합니다.
델타를 올바르게 그리는 대신에 각 mousemove 이벤트에 대해 동일한 긴 경로를 반복해서 그리기 때문에 이것은 끔찍한 앨리어싱을 겪고 있음에 유의하십시오. 다음과 같이 최소한으로 변경된 버전이 있습니다. http://jsfiddle.net/mXrNk/2/ – Phrogz
+1! 나는 완전히 간과했다. 언제나처럼 열망하는 Phrogz –
어떻게 모든 픽셀의 색상을 저장하고 캔버스를 다시 칠할 수 있습니까? – Jonas
코드를 볼 수 있습니까? 설명했듯이 코드는 엄청나게 빠르지 만 너무 많은 데이터를 저장하거나 너무 많은 작업을 다시하고 있습니다. –
rgba라는 개인 변수가 있습니다. context.strokeStyle = rgba – fogy