HTML5 캔버스를 사용하여 이미지를 회전하는 방법은 무엇입니까? (예시 시연)-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML5 캔버스를 사용하여 이미지를 회전하는 방법은 무엇입니까? (예시 시연)

青灯夜游

Oct 20, 2020 pm 05:38 PM

canvas html5

HTML5 캔버스를 사용하여 이미지를 회전하는 방법은 무엇입니까? (예시 시연)

최근에 갑자기 js에서 이미지 회전 기능이 공부하고 싶었어요. 이전 구현 방법에 대해서는 먼저 이야기하지 않겠습니다. HTML5는 이제 매우 좋습니다. 주로 HTML5의 이미지 회전을 이해해 보겠습니다.

예시 데모:

http://www.imqing.com/demo/rotateImg.html

원리: 회전하려면 캔버스 개체를 사용하세요.

구현 방법: 먼저 캔버스 요소를 만든 다음 img 요소를 캔버스에 그립니다. 그러나 실제로 이는 이미지가 회전되지 않는 기본 상황입니다. 그림을 90도 회전해야 하는 경우 그리기 전에 캔버스를 90도 회전해야 합니다.

설명은 다음과 같습니다.

그림의 좌표는 왼쪽 상단부터 계산되며, 회전할 때 아래쪽이 양의 방향입니다. 캔버스에서 이 좌표는 실제로 Rotate에 있으므로 최종 그림이 다릅니다.

당시 저도 픽픽을 이용해서 일정한 각도를 회전시킨 후 시작점의 좌표를 측정했는데, 원래의 회전은 이렇다는 것을 깨달았습니다.

코드:

<body>  
    <button onclick="rotateImg(&#39;testImg&#39;, &#39;left&#39;)">向左旋转</button>  
    <button onclick="rotateImg(&#39;testImg&#39;, &#39;right&#39;)">向右旋转</button><br/>  
    <img src="./test.jpg" id="testImg"/>  
<script>  
    function rotateImg(pid, direction) {  
        //最小与最大旋转方向，图片旋转4次后回到原方向  
        var min_step = 0;  
        var max_step = 3;  
        var img = document.getElementById(pid);  
        if (img == null)return;  
        //img的高度和宽度不能在img元素隐藏后获取，否则会出错  
        var height = img.height;  
        var width = img.width;  
        var step = img.getAttribute(&#39;step&#39;);  
        if (step == null) {  
            step = min_step;  
        }  
        if (direction == &#39;right&#39;) {  
            step++;  
            //旋转到原位置，即超过最大值  
            step > max_step && (step = min_step);  
        } else {  
            step--;  
            step < min_step && (step = max_step);  
        }  
        img.setAttribute(&#39;step&#39;, step);  
        var canvas = document.getElementById(&#39;pic_&#39; + pid);  
        if (canvas == null) {  
            img.style.display = &#39;none&#39;;  
            canvas = document.createElement(&#39;canvas&#39;);  
            canvas.setAttribute(&#39;id&#39;, &#39;pic_&#39; + pid);  
            img.parentNode.appendChild(canvas);  
        }  
        //旋转角度以弧度值为参数  
        var degree = step * 90 * Math.PI / 180;  
        var ctx = canvas.getContext(&#39;2d&#39;);  
        switch (step) {  
            case 0:  
                canvas.width = width;  
                canvas.height = height;  
                ctx.drawImage(img, 0, 0);  
                break;  
            case 1:  
                canvas.width = height;  
                canvas.height = width;  
                ctx.rotate(degree);  
                ctx.drawImage(img, 0, -height);  
                break;  
            case 2:  
                canvas.width = width;  
                canvas.height = height;  
                ctx.rotate(degree);  
                ctx.drawImage(img, -width, -height);  
                break;  
            case 3:  
                canvas.width = height;  
                canvas.height = width;  
                ctx.rotate(degree);  
                ctx.drawImage(img, -width, 0);  
                break;  
        }  
    }  
</script>  
</body>

로그인 후 복사

설명: canvas.width와 height는 설명할 필요가 없습니다. 그래야 합니다. 회전할 필요는 없겠죠? 핵심은 drawImage(img, x, y);drawImage(img, x, y);

其中的x，y是指从哪一点开始画，因为整个坐标系统旋转了，所以，x，y不一样，比如step=1，图片向右旋转了90度，即坐标系旋转了90度，那么起始位置应该是x = 0, y= img.height

여기서 x와 y는 그리기 시작 지점을 의미하므로 전체 좌표계가 회전하므로 x와 y는 다릅니다. step=1과 같이 그림이 오른쪽으로 90도 회전합니다. 즉, 좌표계가 90도 회전한 경우 시작 위치는 x = 0, y= img여야 합니다. 키🎜

위 내용은 HTML5 캔버스를 사용하여 이미지를 회전하는 방법은 무엇입니까? (예시 시연)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.