JS 페이지 동적 그래 픽 도구 SVG,Canvas,VML 소개

그림 그리 기,보고서 같은 기술 에 대해 말하자면 여러분 이 먼저 생각 하 는 것 은 Flex 입 니 다.물론 자바 애플 트 에 대해 서도 많이 알 고 있 습 니 다.이 두 가지 기술 에 있어 서 각각 장단 점 이 있 습 니 다.
우선 플 렉 스 는 무 겁 지만 그 효 과 는 정말 마음 에 든다.자바 애플 트 에 있어 서 적어도 저 는 인터넷 에서 거의 보지 못 했 습 니 다.물론 우리 가 개발 한 것 에 있어 서 우리 의 개발 도구 나 내부 네트워크 에 있어 서 는 약간 있 습 니 다.
사실 현재 웹 에서 그림 을 그리 면 많은 선택 이 있 습 니 다.구 글 에서 JS 그림 을 검색 할 수 있 습 니 다.그림 그리 기 도구 가 많이 제공 되 고 기능 이 매우 강 합 니 다.예 를 들 어 max Graph,도착 할 수 있 습 니 다.http://www.jgraph.com/mxgraph.html올 라 가서 효과 좀 봐.
만약 당신 이 이미 인터넷 에서 잠시 보 았 다 면 우 리 는 웹 에서 JS 가 그린 내용 에 대해 계속 이야기 할 수 있 습 니 다.
도구 플러그 인 이 가득 합 니 다.JS 그림 그리 기 지원 에 있어 서 JQuery 와 EXT 는 긴장 을 풀 지 않 았 습 니 다.특히 JQuery 기반 플러그 인 은 셀 수 없 이 많 습 니 다.
그러나 내 가 말 하고 자 하 는 것 은 이 도구 플러그 인 이 아니다.나 는 주로 브 라 우 저가 그림 그리 기 에 대한 지원 에 대해 말 하고 싶다.일부 그래 픽 플러그 인 은 모든 브 라 우 저 를 지원 하지 않 는 다 는 것 을 알 게 될 것 입 니 다.어떻게 된 일 입 니까?
JS 도형 에 대한 지원 은 주로 SVG,VML,CANVAS 세 단어 에 주목 합 니 다.
SVG
크기 조정 가능 한 벡터 그래 픽(Scalable Vector Graphics,SVG)은 확장 가능 한 태그 언어(XML)를 기반 으로 2 차원 벡터 그래 픽 을 묘사 하 는 그래 픽 형식 입 니 다.SVG 는 W3C 가 제정 한 개방 기준 이다.2008 년 12 월 22 일 SVG Tiny 1.2 가 W3C 의 추천 기준 이 됐 고 W3C 는 현재 SVG 1.2 버 전 제정 을 검토 중이 다.
SVG 파일 은 자바 스 크 립 트(엄 밀 히 말 하면 ECMAScript)스 크 립 트 를 삽입 하여 SVG 대상 을 제어 할 수 있 기 때문에 웹 에서 JS 그림 을 그 릴 때 고려 한 것 입 니 다.
하지만 SVG 는 몇 가지 문제 에 직면 해 있다.SVG 가 직면 한 주요 문 제 는 중요 한 시장 점유 율 을 차지 하고 있 는 벡터 그래 픽 형식 인 Adobe Flash 와 어떻게 경쟁 하 느 냐 하 는 것 이다.또 다른 문 제 는 SVG 의 현지 운영 환경 에서 의 공장 지원 정도 이다.
브 라 우 저 지원 현황:

브 라 우 저 지원 에 대해 서 는 모 질 라 파이 어 폭 스 가 버 전 1.5 발행 직후 SVG 포맷 을 지원 하기 시작 한 디 스 플레이,오페라 8.0 에 서 는 타 이 니 1.1 규격 을 나타 내 는 SVG,구 글 크롬 과 사 파리 에 서 는 SVG 를,마이크로소프트 의 Internet Explorer 8.0 에 서 는 이전 까지 SVG 를 지원 하지 않 았 으 며,Internet Explorer 9.0 에 서 는 SVG 를 지원 하기 시작 했다.즉,시장 점유 율 이 가장 높 은 IE 는 지금까지 지원 을 시 작 했 습 니 다.즉,일반인 이 사용 하 는 IE 브 라 우 저 는 사용 할 수 없 으 며 지원 정도 에 있어 SVG 에 가장 좋 은 브 라 우 저 는 Opera 입 니 다.대부분의 SVG 특성 을 지원 하고 다른 유 람 기 는 일부 속성 을 지원 할 수 없습니다.설마 우리 가 고객 에 게 Opera 브 라 우 저 를 설치 해 야 한다 고 말 했 습 니까?
SVG 의 그림 그리 기 효과 보기:

캔버스
Canvas 요 소 는 HTML 5 의 일부분 으로 스 크 립 트 동적 렌 더 링 비트 그림 을 허용 합 니 다.처음에는 애플 내부 에서 사 용 됐 으 나 차세 대 인터넷 기술 에 이 요 소 를 사용 하 라 는 제안 이 나 왔 다.
이 요소 에 대해 서 는 우선 브 라 우 저 지원 입 니 다.Firefox,Safari,Opera 9 는 모두 canvas tag 를 지원 합 니 다.canvas 는 2D 도형 을 그립 니 다.하지만 IE 는 canvas 를 지원 하지 않 습 니 다.Google 은 다른 브 라 우 저의 상 태 를 모 의 하 는 excanvas 를 개 발 했 습 니 다.
excanvas 현재 버 전 은 excanvasr3,그리고 많은 버그 가 있 습 니 다.또한 IE 에서 의 사용 효율 은 절대적 으로 문제 입 니 다.왜냐하면 excanvas 는 IE 에서 VML 을 사용 하여 canvas 효 과 를 실현 하기 때 문 입 니 다.
데모 의 그림 그리 기 효과 보기:

VML 에 대해
VML 의 전 칭 은 Vector Markup Language(벡터 표기 가능 언어)로 벡터 의 도형 은 도형 이 임의로 확대 축소 되 어 도형 의 질 을 잃 지 않 는 다 는 것 을 의미 하 며 이 는 지 도 를 만 드 는 데 큰 용도 가 있다.하지만 VML 은 IE 의 지원 을 받 을 뿐이다.
VML 그림 효과 보기:

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.