여기를 클릭할 수 있습니다: 캔버스 그림 수평 거울 뒤집기 애니메이션 데모
데모 페이지에서 그림을 클릭하면 애니메이션 효과가 나타납니다.
2. Canvas에서 이미지 미러 뒤집기 구현CSS에서 요소의 뒤집기 효과를 얻는 것은 비교적 간단합니다. 예를 들어 특정 이미지를 가로로 뒤집으려면 CSS 한 줄만 있으면 됩니다.
img { 변환: scaleX(-1);}또는:
img { 변환: scale(-1, 1);}하지만 캔버스에서는 뒤집을 수 없다는 것이 아니라 좌표계의 위치가 좀 더 번거롭습니다.
Canvas에서 다음 코드는 리소스의 수평 미러 뒤집기를 달성할 수 있습니다(컨텍스트가 Canvas의 2D 컨텍스트라고 가정).
context.scale(-1, 1);
또는 직접 행렬 변환을 위해 setTransform API를 사용하세요.
context.setTransform(-1, 0, 0, 1, 0, 0);
그러나 뒤집기가 구현되었음에도 불구하고 Canvas에서는 요소의 위치 지정에 큰 문제가 있습니다. 이는 Canvas의 좌표 변환 시스템이 CSS의 좌표 변환 시스템과 다르기 때문입니다. 따라서 중심 뒤집기 효과를 얻으려면 뒤집기 전에 대상 요소의 중심점을 변환 축으로 이동해야 합니다.
수평 뒤집기 거리를 취하고, 스케일링 전 변위 변환 후 수평 오프셋을 변환하면 항상 뒤집기 중심이 맞춰지는 효과를 볼 수 있습니다.
언어가 창백하므로 설명을 위해 사진을 찍어 보겠습니다.
캔버스의 기본 변경 좌표계는 왼쪽 상단입니다.
따라서 수평 스케일이 1, 0.5, 0, -0.5, -1이라면 최종 위치는 아래와 같습니다.
따라서 오프셋되어야 하는 수평 거리 공식을 얻을 수 있습니다.
distance = (canvas.width – image.width * scale) / 2;
따라서 그림을 미러링하고 그리는 최종 키 코드는 다음과 같습니다(수평 스케일링 크기를 스케일이라고 가정).
//좌표 기준 조정 context.translate((canvas.width - image.width * scale) / 2, 0);context.scale(scale, 1);context.drawImage(image, 0, 0);//좌표 기준 context.setTransform(1, 0, 0, 1, 0, 0)을 복원합니다.
애니메이션 효과를 추가하는 방법은 무엇입니까?
Tween.js(https://github.com/zhangxinxu/tween)를 사용할 수 있습니다.
편리한 Math.animation() 메소드를 사용하면 원하는 효과를 쉽게 얻을 수 있습니다.
Math.animation(form, to, Duration, easing, callback);
애니메이션 JS는 다음과 같습니다.
var canvas = document.querySelector('canvas');var context = canvas.getContext('2d');//애니메이션 Math.animation(1, -1, 600, 'Quad.easeInOut', function (value, isEnding ) { // 캔버스 내용을 지웁니다. context.clearRect(0, 0, canvas.width, canvas.height); 좌표 조정 context.translate((canvas.width - canvas.width * value) / 2, 0); //크기 조정 context.scale(value, 1) //현재 이미지 그리기 context.drawImage(eleImg, 0, 0); //좌표 참조 복원 context.setTransform(1, 0, 0, 1, 0, 0);}); 3. 결론또 다른 차가운 기사는 캔버스의 프런트엔드 사용자가 많지 않고 대중적인 기술만큼 대중적이지 않다는 것입니다. 그러나 옛말처럼 소홀히 할 수 없을 정도로 작은 선행은 없습니다. 앞으로 관련 문제를 찾을 때 친구들이 도움을 줄 수 있기를 바랍니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.