js旋轉(zhuǎn)圖片的功能-創(chuàng)新互聯(lián)

最近突然想研究一下js旋轉(zhuǎn)圖片的功能。對于之前的實現(xiàn)方式，就不先說了?，F(xiàn)在HTML5很不錯，主要了解一下HTML5中的圖片旋轉(zhuǎn)吧。

成都創(chuàng)新互聯(lián)主要從事網(wǎng)站制作、成都做網(wǎng)站、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)宣恩,10多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

實例演示：

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

原理：利用canvas對象來旋轉(zhuǎn)。

實現(xiàn)方式：首先創(chuàng)建一個canvas元素，然后把img元素繪入canvas。但是，實際上，這是默認(rèn)情況，就是圖片沒旋轉(zhuǎn)時。如果圖片要旋轉(zhuǎn)90度的話，就需要先把canvas畫布旋轉(zhuǎn)90度后再繪圖。

描述如下： （內(nèi)部旋轉(zhuǎn)原理是這樣的，圖片的坐標(biāo)是從左上角開始計算，向右為x正方向，向下為y正方向，在旋轉(zhuǎn)畫布canvas時，實際上是這個坐標(biāo)在旋轉(zhuǎn)，所以最后繪圖方式不一樣。當(dāng)時我還用了picpick來測量旋轉(zhuǎn)一定角度后起點坐標(biāo)，才知道原來旋轉(zhuǎn)是這樣的，嘿嘿。）

代碼：

<body>  
    <button onclick="rotateImg('testImg', 'left')">向左旋轉(zhuǎn)</button>  
    <button onclick="rotateImg('testImg', 'right')">向右旋轉(zhuǎn)</button><br/>  
    <img src="./test.jpg" id="testImg"/>  
<script>  
    function rotateImg(pid, direction) {  
        //最小與大旋轉(zhuǎn)方向，圖片旋轉(zhuǎn)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('step');  
        if (step == null) {  
            step = min_step;  
        }  
        if (direction == 'right') {  
            step++;  
            //旋轉(zhuǎn)到原位置，即超過大值  
            step > max_step && (step = min_step);  
        } else {  
            step--;  
            step < min_step && (step = max_step);  
        }  
        img.setAttribute('step', step);  
        var canvas = document.getElementById('pic_' + pid);  
        if (canvas == null) {  
            img.style.display = 'none';  
            canvas = document.createElement('canvas');  
            canvas.setAttribute('id', 'pic_' + pid);  
            img.parentNode.appendChild(canvas);  
        }  
        //旋轉(zhuǎn)角度以弧度值為參數(shù)  
        var degree = step * 90 * Math.PI / 180;  
        var ctx = canvas.getContext('2d');  
        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就不用解釋了吧，應(yīng)該。rotate應(yīng)該也不用吧？關(guān)鍵是
drawImage(img, x, y);

其中的x，y是指從哪一點開始畫，因為整個坐標(biāo)系統(tǒng)旋轉(zhuǎn)了，所以，x，y不一樣，比如step=1，圖片向右旋轉(zhuǎn)了90度，即坐標(biāo)系旋轉(zhuǎn)了90度，那么起始位置應(yīng)該是
x = 0, y= img.height

其它類似可得。是不是覺得很簡單呢？

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

標(biāo)題名稱：js旋轉(zhuǎn)圖片的功能-創(chuàng)新互聯(lián)
瀏覽路徑：http://www.rwnh.cn/article34/pocpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、動態(tài)網(wǎng)站、網(wǎng)頁設(shè)計公司、標(biāo)簽優(yōu)化、搜索引擎優(yōu)化、網(wǎng)站策劃

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

js旋轉(zhuǎn)圖片的功能-創(chuàng)新互聯(lián)