방금 Canvas를 사용하여 프로젝트를 시작했습니다. 하지만 내가 필요로하는 것 중 하나는 이동 가능한 클릭 가능한 상자를 추적하는 것입니다 : http://raphaeljs.com/graffle.html 그래서 Raphael-js + SVG가 더 좋을지 궁금합니다.HTML5 Canvas와 SVG + Raphael.js의 장단점은 무엇입니까?
어느 것을 사용 하시겠습니까? 그리고 왜?
이 답변은 다른 대답에서 복사되었습니다. 그러나 OP가 질문을 변경 시켰기 때문에이 대답은 그와 관련성이 떨어졌습니다. 그렇게 여기이 질문에 더 많은 관련이 이럴 간다 : (당신 OSS의 사람 또는 김프와 잉크 스케이프) 포토샵과 일러스트 레이터 betwee의 차이로 캔버스와 SVG의 차이
생각합니다. 하나는 비트 맵과 다른 벡터 아트를 다루고 있습니다.
캔버스를 사용하면 비트 맵으로 그리기 때문에 이미지를 번지거나 흐리게하거나 구울 수 있고 쉽게 피할 수 있습니다. 그러나 비트 맵이기 때문에 쉽게 선을 그릴 수 없으며 선의 위치를 변경하기로 결정할 수 없습니다. 이전 행을 삭제 한 다음 새 행을 그려야합니다.
svg를 사용하면 벡터를 그리기 때문에 쉽게 그림을 이동, 크기 조정, 회전, 위치 조정 및 뒤집을 수 있습니다. 그러나 벡터이기 때문에 선 두께에 따라 가장자리를 쉽게 흐리게 처리하거나 빨간색 원을 파란색 사각형으로 완벽하게 병합 할 수 없습니다. 개체 사이에 중간 다각형을 그려 흐림 효과를 시뮬레이트해야합니다.
때때로 사용 사례가 겹칩니다. 예를 들어 많은 사람들이 캔버스를 사용하여 단순한 선 그리기를하고 객체를 자바 스크립트의 데이터 구조로 추적합니다. 그러나 실제로, 그들은 둘 다 다른 목적을 제공합니다. 캔버스 위에 순수한 자바 스크립트로 범용 벡터 드로잉을 구현하려고한다면 C 언어로 구현 될 가능성이 가장 높은 SVG를 사용하는 것보다 더 빠를 것 같지 않습니다.
모핑 svg 경로가 가능합니다 (예 : 원형 -> 파란색 사각형) (경로 요소로 모양을 나타낼지라도). svg도 필터를 가지고 있으므로 svg 파일에 애트리뷰트와 필터 정의를 추가하는 것보다 흐림 효과를 추가하는 것이 더 어렵지 않습니다. –
@ 에릭 : 나는 모핑에 대해 말하는 것이 아닙니다.나는 블러 링으로 서로 블렌딩되는 모양에 대해 이야기하고 있습니다. 예를 들어, 파란색 사각형에 혼합 된 빨간색 원의 그림 (애니메이션, 정적 그림이 아님)은 혼합되는 지점에서 자주색을 띠고 가장자리는 서로 유기적으로 흐려집니다. 이것은 Photoshop 및 번짐 도구에서 간단하지만 Illustrator에서 수행하기가 더 어렵습니다. – slebetman
@Erik : 또한 단순히 필터를 사용하여 선의 두께에 따라 흐려지는 정도를 변경하는 것은 매우 어렵습니다. 여러 개의 필터를 사용할 수도 있지만 분명히 중요하지는 않습니다. – slebetman
몇 가지 사항을 결정해야합니다. 모바일 브라우저에서 작동합니까? SVG (Raphael)는 안드로이드 (iphone에 대해 모른다)에서 작동하지 않을 것이다. 반대로 Internet Explorer의 이전 버전에서 작동하는 항목을 원할 경우 캔버스가 작동하지 않을 수 있습니다 (ExCanvas가 IE6을 지원하는지 확신 할 수 없음).하지만 SVG가 어느 정도 수행합니다 (Raphael은 IE6을 지원합니다). 또한
, 당신은 단지 애니메이션/드로잉을하고있는, 또는 완전한를 작성하는 경우 등 버튼, 슬라이더, 탭 컨테이너, 목록, 그리드와 같은 일을해야 할 수도 있습니다 전체 날려 앱
을하고있다 http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/
dojox.gfx 여러 백엔드를 지원하는 벡터 그래픽 라이브러리입니다 : 응용 프로그램 당신은 당신이, Dojo 툴킷을 확인 특별히 dojox.gfx 및 기타 그래픽 DojoX는 라이브러리 수도, 너무 모바일 물건에 작업 할 캔버스 , SVG, 심지어 실버 라이트. http://www.lrbabe.com/?p=217
체크 아웃 또한 캔버스 독립형 장면 그래프 라이브러리 cake.js : http://code.google.com/p/cakejs/ 을 또한 processingjs를 확인 여기에 라파엘과 비교 기사입니다.
아 ... 그게 알아두면 매우 유용합니다 : 안드로이드는 SVG/Raphael을 지원하지 않습니다. – interstar
ExCanvas는 IE6을 지원하지만 모든 Canvas 기능을 다루지는 않습니다. Android는 향후 릴리스에서 SVG를 지원합니다. iPhone/iPad는 SVG를 지원합니다 IE는 버전 9까지 SVG를 지원하지 않습니다. –
또한 가리키는 문서가 1 살 이상이므로 구형입니다. –
RaphaelJS는 * SVG가 아니기 때문에 Canvas가없는 브라우저 (IE는 Canvas 에뮬레이터가 있지만)에서 작동합니다. – Ken