canvas實現圖片旋轉縮放
阿新 • • 發佈：2018-11-05
canvas實現圖片旋轉，用到的基本函式：
rotate（）實現旋轉；
scale（X,Y）實現縮放，X代表水平縮放，Y代表垂直縮放；
translate（X,Y）為畫布的變換矩陣新增水平的和垂直的偏移；
基本思路：用rotate（）方法實現圖片旋轉，用scale（）實現縮放。rotate（）旋轉的時候是以左上角為頂點進行旋轉，如果想以圖片中心為定點旋轉，用translate（）將點定位到圖片中心就好。
本例子以一個黑色矩形來模擬圖片，實現類似的效果。
<!DOCTYPE html>
<html>
<head>
<meta 基本效果如果圖示：方塊等比放大2倍，並旋轉45度；
接下來通過計時器，讓這個方框動起來，在用計時器的時候每次開始要先儲存繪製路徑，並清除畫布大小，結束的時候要用restore()方法清除本次的繪圖，保持始終是一個方框在動。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{background: black;}
#myCanvas{background: white;}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
<script>
window.onload = function(){
var oC = document.getElementById("myCanvas");
var OGC = oC.getContext("2d");
var num = 0;
var num2 = 0;
var value = 1;
setInterval(function(){
num++;
OGC.save();
OGC.clearRect(0,0,oC.width,oC.height);
OGC.translate(100,100);
//通過value改變num2值，控制是放大還是縮小
if (num2 == 100) {
value = -1;
} else if(num2 == 0){
value = 1;
}
num2+=value;
OGC.rotate(num*Math.PI/180);
//將旋轉中心移到圖片中心
OGC.translate(-50,-50);
OGC.fillRect(0,0,100,100);
OGC.restore();
},30);
}
</script>
</html>
效果圖如下，gif看起來有些卡頓，實際執行很流暢，可以直接複製程式碼執行檢視效果：
