John Resig의 Processing.js를 사용하는 것이 합리적입니까?

StackOverflow https://stackoverflow.com/questions/170937

  •  05-07-2019
  •  | 
  •  

문제

나는 상당히 강렬한 JavaScript/Canvas 사용으로 웹 사이트를 만드는 것에 대해 생각하고 있습니다. Processing.js 그리고 캔버스를 훨씬 쉽게 조작 할 수있는 것 같습니다. 누구든지 내가 이유를 아는 사람이 있습니까? 그렇지 않아야합니다 Processing.js를 사용합니까? 오래된 브라우저는 사용할 수 없지만 지금은 괜찮습니다.

도움이 되었습니까?

해결책

언급 한 바와 같이, IE는 Processing.js (IE8 베타 포함)에 의해 지원되지 않습니다. 또한 캔버스를 사용하는 것과 비교할 때 (특히 JavaScript API를 사용하는 대신 처리 언어로 문자열을 구문 분석하는 경우) Processing.js는 성능 측면에서 약간 느린 것으로 나타났습니다.

나는 개인적으로 가공 래퍼보다 캔버스 API를 선호합니다. 왜냐하면 그것이 더 많은 제어를 제공하기 때문입니다. 예를 들어:

처리 라인 () 함수는 다음과 같이 구현됩니다.

function line (x1, y1, x2, y2) {
  context.beginPath();
  context.moveTo(x1, y1);
  context.lineTo(x2, y2);
  context.closePath();
  context.stroke();
};

그리고 당신은 이것을 사용합니다 (JavaScript-Explosed API를 사용한다고 가정) :

var p = Processing("canvas")
p.stroke(255)

////Draw lines...///
p.line(0,0,10,10)
p.line(10,10,20,10)
//...and so on
p.line(100,100,200,200)
////End lines////

모든 라인 () 호출은 새 경로를 열고 닫아야하는 반면 캔버스 API를 사용하면 단일 시작 경로/엔드 포트 블록 내에 모든 라인을 그릴 수있어 성능이 크게 향상 될 수 있습니다.

context.strokeStyle = "#fff";
context.beginPath();

////Draw lines...///
context.moveTo(0, 0);
context.lineTo(10, 10);
context.lineTo(20, 10);
//...so on
context.lineTo(200, 200);
////End lines...///

context.closePath();
context.stroke();

다른 팁

IE7에서 작동하지 않으면 괜찮다면 가십시오. Firefox 3에서 작업했습니다. Silverlight/Flash Effects를 페이지에 가져 오는 매끄러운 방법입니다.

내 직감은 Processing.js와 같은 라이브러리가 빠른 트랙 경로에서 변경되거나 업그레이드되므로 새로운 기능을 수행 할 때 실행할 준비를하고 있습니다.

캔버스의 그리기를 단순화하지 않습니다. 캔버스를 사용하는 경우 애니메이션 작업을 단순화하는 것입니다. 애니메이션을하고 있고 전체 브라우저 지원에 관심이없는 경우 Processing.js를 사용하십시오. 애니메이션을하지 않는 경우 (예를 들어 차트 또는 둥근 모서리를하는 경우) Processing.js의 오버 헤드를 추가하지 마십시오.

어느 쪽이든, 캔버스 API를 직접 사용하는 방법을 배우는 것이 좋습니다. 캔버스 API, 특히 변환을 이해하면 Processing.js를 사용하는 경우에도 큰 도움이됩니다.

대신 플래시를 사용한다고 말하고 싶습니다. Processing.js와 함께 작동하는 브라우저 수보다 더 많은 브라우저가 플래시가 설치되어 있습니다. 또한 플래시에서 더 나은 성능을 얻을 수 있습니다.

새로운 JavaScript 구현 P5J를 사용해보십시오 p5js.org

아, 그리고 레오의 대답에 응답하여 실제로 당신은 실제로 사용할 필요가 없습니다. 선 처리 또는 P5J의 기능은 별도입니다 beingshape 그리고 경과 캔버스 API와 유사한 기능.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top