우리 모두 알고 있듯이 캔버스는 비트맵이므로 원하는 것을 렌더링할 수 있지만 캔버스의 속성을 조작해야만 편집할 수 있습니다. 즉, 캔버스에 그려진 것을 조작할 수 없습니다. 예를 들어 캔버스에 그림을 추가했는데 이제 그림을 10px 이동하려고 하면 그림을 전혀 얻을 수 없기 때문에 그림을 직접 조작할 수 없습니다. .모든 정보. 우리가 얻을 수 있는 것은 캔버스 객체뿐입니다.
그렇다면 질문이 생깁니다. 사진을 어떻게 회전합니까?실제로 캔버스는 캔버스를 제어하기 위한 다양한 인터페이스를 제공합니다. 회전을 위한 Rotate() 메소드가 있습니다.
실제로 여기서 회전은 캔버스를 실제로 회전시키지 않습니다. 예를 들어 내 ctx.rotate(Math.PI/2)는 90° 회전합니다. 페이지에서 캔버스가 90° 회전된 것을 볼 수 있다는 의미는 아닙니다. 캔버스는 실제로 육안으로 볼 수 있는 캔버스와 작업에 사용되는 가상 캔버스의 두 부분으로 구성되어 있음을 이해할 수 있습니다.
이해하기 어려울 수 있으니 그림을 이용해 설명해 보겠습니다. 먼저, 캔버스를 회전하고 캔버스의 원점을 회전할 수 있는 메서드를 소개하겠습니다. 기본적으로 캔버스의 원점은 왼쪽 위입니다.
45° 회전의 효과를 살펴보겠습니다.
여기에서 방금 언급한 가상 캔버스가 45° 회전된 다음 가상 캔버스에 그림이 삽입되는 것을 볼 수 있습니다. 그러면 실제 캔버스가 제시하는 것은 가상 캔버스와 실제 캔버스의 교차점입니다. 여기서 이해하기 쉽지 않을 수도 있으니 잘 생각해보시기 바랍니다.
두 그림의 코드는 다음과 같습니다.
// 회전되지 않음 var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.drawImage(img, 0, 0)// 시계 반대 방향 회전 45° var img = document.getElementById('img')var 캔버스 = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.rotate(-Math.PI / 4);ctx.drawImage(img, 0, 0)
이걸 보면 기본적으로 모든 사람들이 회전()을 사용하는 방법을 알고 있다고 생각합니다.
사진의 중심을 회전시키는 방법에 대해 이야기해 봅시다.
캔버스의 다른 두 가지 방법을 사용하는 방법에 대해 이야기하겠습니다.
ctx.translate(x, y): 캔버스의 원점을 이동할 수 있는 메소드입니다. 매개변수는 x, y입니다.
ctx.drawImage(img, x, y): 이 메서드는 위에서 사용되었지만 세 개의 매개 변수가 있습니다. 첫 번째는 삽입할 이미지의 dom이고 다음 두 개 x와 y는 img에 대한 매개 변수입니다. 이미지를 삽입하면 위치가 수정됩니다.
그림에서 알 수 있듯이 그림 중심을 기준으로 45° 회전하려면 캔버스의 원점을 그림 중심으로 이동한 다음 캔버스를 회전시킨 다음 그림을 삽입할 때, 그림 자체의 절반만큼 그림을 왼쪽 상단 모서리로 변환합니다.
여기에는 세 가지 단계가 있습니다.
이 세 단계를 따로 살펴보겠습니다. (사진의 너비와 높이는 400과 300입니다.)
캔버스 원점 이동
var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150)ctx.drawImage(img, 0, 0)
캔버스 회전
var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150)ctx.rotate(-Math.PI / 4) ctx.drawImage(img, 0, 0)
그림 삽입 및 이동
var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150)ctx.rotate(-Math.PI / 4) ctx.drawImage(img, -200, -150)
그게 다야 넌 끝났어
ps: 일련의 작업을 완료한 후 모든 사람은 캔버스의 원점을 회전하여 복원해야 합니다. 그렇지 않으면 일련의 작업 후에 캔버스 설정이 엉망이 됩니다. 각 작업 후에는 설정을 원래 상태로 다시 복원하세요.
var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150) // 1ctx.rotate(-Math.PI / 4) // 2ctx.drawImage(img, -200, -150)// 설정 복원(복원하는 단계는 수정한 단계와 반대로 진행해야 함) ctx.rotate(Math.PI / 4) // 1ctx.translate(-200, -150) // 2// 그 후 원점은 캔버스는 왼쪽 상단 각도로 돌아가고 회전 각도는 0//다른 작업...
또 한 가지 주목할 점은 제가 방금 시연한 것은 캔버스를 기준으로 이미지의 x축과 y축이 0인 예입니다. 0이 아니면 원점을 이동하면 됩니다. ctx.translate(200+x, 150+y). 여기서 200과 150은 이미지 너비와 높이의 절반이고 x와 y는 캔버스를 기준으로 한 이미지의 x와 y입니다.
이번 글에서는 이미지 중앙에서의 회전에 대해서만 설명하겠습니다. 나중에 이미지의 회전과 크기 조정에 관해 글을 쓰겠습니다. 잘못된 내용이나 잘못된 내용이 있으면 지적해주세요.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.