如何利用HTML5 canvas旋轉圖片？（實例演示）-html教學-PHP中文網

首頁

web前端

html教學

如何利用HTML5 canvas旋轉圖片？（實例演示）

青灯夜游

Oct 20, 2020 pm 05:38 PM

canvas html5

如何利用HTML5 canvas旋轉圖片？（實例演示）

最近突然想研究一下js旋轉圖片的功能。對於之前的實現方式，就不先說了。現在HTML5很不錯，主要了解HTML5中的圖片旋轉吧。

實例示範：

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

原則：利用canvas物件來旋轉。

實作方式：先建立一個canvas元素，然後把img元素繪入canvas。但是，實際上，這是預設情況，就是圖片沒旋轉時。如果圖片要旋轉90度的話，就需要先把canvas畫布旋轉90度後再繪圖。

描述如下：

內部旋轉原理是這樣的，圖片的座標是從左上角開始計算，向右為x正方向，向下為y正方向，在旋轉畫布canvas時，實際上是這個座標在旋轉，所以最後繪圖方式不一樣。

當時我還用了picpick來測量旋轉一定角度後起點座標，才知道原來旋轉是這樣的。

程式碼：

<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就不用解釋了吧，應該。 rotate應該也不用吧？關鍵是drawImage(img, x, y);

其中的x，y是指從哪一點開始畫，因為整個座標系統旋轉了，所以，x，y不一樣，例如step=1，圖片向右旋轉了90度，也就是座標系旋轉了90度，那麼起始位置應該是x = 0, y= img.height

以上是如何利用HTML5 canvas旋轉圖片？（實例演示）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn