HTML 모양 (선호하는 DIV) CSS3 전환 지원

Question

나는 모든 것을 염두에두고 게임을 만들 계획입니다. 나는 HTML, CSS, Javascript를 잘 알고 있으며, 크로스 브라우저 지원을 제공하므로 확실히 사용하게 될 것입니다.

내가 사업부 (사각형)을 보여줄 필요가 필요가있는 다음 어떤 행동에 더 나은이 picture

에서 볼 수있는 다른 형태로 애니메이션 내가 DIV 요소에 애니메이션을 적용 할 수 있습니다 또는 내가 필요 그렇지 않으면 SVG 또는 캔버스를 사용 하시겠습니까?

Answer 1

브라우저에서 임의의 도형을 그리려면 Canvas 또는 SVG를 사용하는 것이 좋습니다.

HTML <div> 요소와 CSS를 사용하여 '그리기'를 시도하지 않는 것이 좋습니다. 이것은 가능하지만 해킹이 가장 쉽고 상당히 엉망이 될 수 있습니다.이 기술을 사용하여 게임을 작성하고 싶지는 않습니다.

그래서 SVG 또는 Canvas가 가장 좋습니다.

SVG vs Canvas의 선택은 두 기술의 속성 에서처럼 지원하려는 플랫폼/브라우저에 따라 다릅니다.

분명히 SVG (벡터 그래픽)와 Canvas (픽셀 그래픽)의 주된 차이점을 이미 알고 있지만이 두 가지 브라우저는 서로 다른 브라우저를 지원하기 때문에이를 고려해야합니다.

당신이 제공 한 정보가 제한되어있어서 SVG가 자신이하는 일에 가장 자연스럽게 들리는 것처럼 보입니다. 그러나 SVG는 아직 Android 브라우저에서 지원되지 않으므로 휴대 기기에서 게임을 실행하려면이를 고려해야합니다. 이것은 아마도 Canvas를 사용해야한다는 것을 의미합니다.

데스크톱을 고수하고있는 경우 모든 최신 브라우저는 Canvas와 SVG를 모두 지원합니다. 분명히 IE8 및 그 이전 버전 모두에서 누락되었지만 IE는 SVG와 비슷한 XML 기반 벡터 언어 인 VML이라는 경쟁 형식을 지원합니다.

IE8을 지원하려면 (가능하지 않은 경우도 있습니다!) IE 용 VML 엔진을 사용하여 Canvas 및 SVG 그래픽을 모두 렌더링하는 IE 용 javascript 라이브러리가 있습니다. 분명히이 두 언어는 매우 유사하기 때문에 SVG에서 매우 잘 작동합니다. 나는 캔버스 변환에 대해 약간 더 많은 혼합 된 보고서를 들었지만 시도 해보고 싶을 수도 있습니다. IE8의 Javascript 엔진은 매우 느리기 때문에 자바 스크립트 기반 그래픽 형식 변환은 게임 컨텍스트에서 유용하기에 충분한 성능을 제공하지 못할 수도 있습니다.

희망이 있습니다.