最近突然想研究一下js旋轉(zhuǎn)圖片的功能。對於之前的實(shí)現(xiàn)方式，就不先說了?，F(xiàn)在HTML5很不錯，主要了解HTML5中的圖片旋轉(zhuǎn)吧。
實(shí)例示範(fàn)：?
http://www.imqing.com/demo/rotateImg.html
原則：利用canvas物件來旋轉(zhuǎn)。
實(shí)作方式：先建立一個canvas元素，然後把img元素繪入canvas。但是，實(shí)際上，這是預(yù)設(shè)情況，就是圖片沒旋轉(zhuǎn)時。如果圖片要旋轉(zhuǎn)90度的話，就需要先把canvas畫布旋轉(zhuǎn)90度後再繪圖。
描述如下：?
內(nèi)部旋轉(zhuǎn)原理是這樣的，圖片的座標(biāo)是從左上角開始計算，向右為x正方向，向下為y正方向，在旋轉(zhuǎn)畫布canvas時，實(shí)際上是這個座標(biāo)在旋轉(zhuǎn)，所以最後繪圖方式不一樣。
當(dāng)時我還用了picpick來測量旋轉(zhuǎn)一定角度後起點(diǎ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是指從哪一點(diǎn)開始畫，因為整個座標(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
以上是如何利用HTML5 canvas旋轉(zhuǎn)圖片？ （實(shí)例演示）的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
理解H5：含義和意義
May 11, 2025 am 12:19 AM
H5是HTML5，是HTML的第五個版本。 HTML5提升了網(wǎng)頁的表現(xiàn)力和交互性，引入了語義化標(biāo)籤、多媒體支持、離線存儲和Canvas繪圖等新特性，推動了Web技術(shù)的發(fā)展。
HTML5的重要目標(biāo)：增強(qiáng)網(wǎng)絡(luò)開發(fā)和用戶體驗
May 14, 2025 am 12:18 AM
html5aimstoenhancewebdevelopmentanduserexperiencethroughsemantstructure，多媒體綜合和performanceimprovements.1）SemanticeLementLike like，和ImproVereAdiability and ImproVereAdabilityActibility.2）and tagsallowsemlessallowseamelesseamlessallowseamelesseamlesseamelesseamemelessmultimedimeDiaiaembediiaembedplugins.3）。 3）3）
什麼是微數(shù)據(jù)？ HTML5解釋了
Jun 10, 2025 am 12:09 AM
MicrodataenhancesSEOandcontentdisplayinsearchresultsbyembeddingstructureddataintoHTML.1)Useitemscope,itemtype,anditempropattributestoaddsemanticmeaning.2)ApplyMicrodatatokeycontentlikebooksorproductsforrichsnippets.3)BalanceusagetoavoidclutteringHTML
HTML5：2024年的目標(biāo)
May 13, 2025 am 12:13 AM
html5'sgoalsin2024focusonrefinement和optimization，notNewFeatures.1）增強(qiáng)performanceandeffipedroptimizedRendering.2）inviveAccessibilitywithRefinedwithRefinedTributesAndEllements.3）explityconcerns，尤其是withercercern.4.4）
HTML5 microdata：最好的在線工具
Jun 09, 2025 am 12:06 AM
thebestonlinetoolsforhtml5microdataaregooglestructuctureddatamarkuphelperandschema.org'smarkupvalidator.1）googlestructuctuctructuctureddatama RKUPHELPERISUSER友好型，GuidinguserstoAddmicrodatatagsforenhancedseo.2）schema.org'smarkupvalidatoratorChecksmicrodatiaimplementa
HTML5的目的：創(chuàng)建一個更強(qiáng)大，更容易訪問的網(wǎng)絡(luò)
May 14, 2025 am 12:18 AM
html5aimstoenhancewebcapabilities，Makeitmoredynamic，互動，可及可訪問。 1）ITSupportsMultimediaElementsLikeAnd，消除innewingtheneedtheneedtheneedforplugins.2）SemanticeLelelemeneLementelementsimproveaCceccessibility inmproveAccessibility andcoderabilitile andcoderability.3）emply.3）lighteppoperable popperappoperable -poseive weepivewebappll
HTML5的目標(biāo)：網(wǎng)絡(luò)未來的開發(fā)人員指南
May 11, 2025 am 12:14 AM
HTML5的目標(biāo)是簡化開發(fā)過程、提升用戶體驗和確保網(wǎng)絡(luò)的動態(tài)性和可訪問性。 1)通過原生支持音視頻元素簡化多媒體內(nèi)容的開發(fā)；2)引入語義元素如、等，提升內(nèi)容結(jié)構(gòu)和SEO友好性；3)通過應(yīng)用緩存增強(qiáng)離線功能；4)使用元素提高頁面交互性；5)優(yōu)化移動兼容性，支持響應(yīng)式設(shè)計；6)改進(jìn)表單功能，簡化驗證過程；7)提供性能優(yōu)化工具如async和defer屬性。
HTML5中的微型數(shù)據(jù)：更好的搜索引擎排名的關(guān)鍵
Jun 12, 2025 am 10:22 AM
microdatasimprovesseobyenhancingsearchEngineNeDeNgineNeDingingAndRankingOfWebPages.1）itaddsSsemanticMeaningTohtml，aidideBetterTerexexing.2）itenablesrichsrichsnippets，增加了cloughrates.3）usecorrectschema.3）usecorrectschema.orgvverarydecept.ecob.orand.ecepbebularyand.orand.ecobulary
