그림을 회전시키는 3가지 솔루션
1. 그림 회전 방안
1) css3은 그림 회전 기능을 실현한다. 지원하는 브라우저는 크롬, Firefox가 있다.opera는 지원하지 않습니다.
구체적인 코드는:-moz-transfrom:rotate(90deg);-webkit-ransfrom:rotate(90deg);상술한 코드는 그림을 시계 방향으로 90도 회전시키는 것이지만 사실은 임의의 도수를 회전시킬 수 있다.그러나 css3을 지원하는 브라우저는 크롬,firefox3만 있습니다.6, 사파리, i 브라우저는 지원되지 않습니다.그럼 IE 씨는 어떻게 할까요?그래서 아래의 방안이 생겼다
2) IE에서 필터로 회전
구체적인 코드는 filter:progid:DXImageTransform입니다.Microsoft.BasicImage(rotation=1);여기의rotation 매개 변수는 0,1,2,3으로 이 숫자에 90을 곱한 후의 회전 각도를 나타낸다.IE에서 임의의 각도를 돌리려면 매트릭스 변환 필터를 사용해야 한다. 우리가 일상적으로 사용하는 과정에서 대부분은 90의 배수를 바꾸는 것을 사용하는데 여기서 임의의 각도를 논의하지 않는다.그러나 문제가 있다. 만약에 i 브라우저가 아니라면 CSS3를 지원하지 않는다면 그림의 회전을 실현한다면 사실 canvas도 그림을 회전할 수 있다.
3) 캔버스로 그림의 회전
canvas는 크롬, Firefox,opera 등 브라우저에서 모두 지원합니다. 그는 자바스크립트를 기반으로 한 그림 API를 가지고 있습니다.우선 canvas+JavaScript를 이용하여 그림의 회전을 어떻게 하는지 살펴보겠습니다.
코드는 다음과 같습니다.
var test = function(){
var canvas = document.getElementById("result");
var oImg = document.getElementById("Img");
canvas.height = 300;
canvas.width = 200;
var context = canvas.getContext("2d");
context.save();
context.translate(200,0);
context.rotate(Math.PI/3);
context.drawImage(oImg, 0, 0, 300, 200);
context.restore();
oImg.style.display = "none";
};
상술한 코드는 먼저 canvas 대상을 얻은 다음에 그의 높이를 설정하고 그림을 그리기 시작했다.이것은 canvas의 중심점과 회전 각도를 바꾸고 그림을 canvas에 그려서 저장하고 이전의 그림을 숨깁니다.이런 방법의 실현은 여전히 비교적 매끄럽다.
2. 각종 방안의 대비 css3의 실현 방안은 원시 그림이 차지하는 공간의 크기를 바꾸지 않지만 i의 필터는 그림이 차지하는 공간의 크기를 바꾼다.사실 i 아래에서도 canvas를 지원할 수 있습니다. canvas의 스크립트만 인용하면 됩니다.이것은 구글에서 제공하는 것이다.그러나 이 스크립트는 좀 크다. 압축하기 전에 20여 k가 있는데 나는 i에서 필터를 사용해서 실현하고 다른 브라우저는 canvas 라벨을 사용해서 실현하는 것을 권장한다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.