예를 들어 아래와 같은 사진이 있습니다
으아악사진의 너비와 높이는1280x600
,并且transform
属性是transform: translate(6px, 6px) scale(1.5) rotate(100deg);
죄송하지만 제가 만든 1280x600
的canvas画布,要怎样才能让图片按照transfrom
의 매개변수를 캔버스에서 어떻게 변형할 수 있나요?
캔버스의 최종 크기는 변경되지 않습니다.
高洛峰2017-05-16 13:25:58
이 세 가지 API는 캔버스의 ctx 객체에서 확인할 수 있지만 한 가지에 주목해야 합니다. 캔버스의 변환은 CSS의 변환-원산지:0,0과 유사하게 원점 변환입니다. 속성이지만 CSS 변환 속성의 기본값은 center center그래서 이것은 캔버스에서 어떻게앵커 포인트를 이동하는 방법이라는 상대적으로 고전적인 문제와 관련이 있습니다. 간단히 말하면 캔버스 변환의 음수 값을 사용하여 수행됩니다. 휴대폰으로 타이핑할 때는 보여드릴 수 없습니다.
포스터에 대한 간단한 방법은 또한 이미지의 변환 원본을 0,0으로 설정합니다. 이때 이전 효과를 달성하기 위한 매개변수는 캔버스 값과 정확히 동일합니다.
밖에서 소리가 나지 않는 컴퓨터가 이해가 안된다면, 돌아가서 구현하도록 도와드릴 수 있지만, 성장의 관점에서 위의 링크에 따라 구현 코드를 직접 작성하는 것이 좋습니다仅有的幸福2017-05-16 13:25:58
https://github.com/wanadev/pe...
데모 http://www.html5.jp/test/pers...
도움이 될 수 있습니다