- canvas的transform有三個(gè)屬性：translate徐裸、scale和rotate猖腕，沒(méi)有skew
- 和transform的執(zhí)行順序一樣刃宵，這個(gè)也是后寫(xiě)的屬性先執(zhí)行逊脯，也就是從后往前執(zhí)行
canvas的transform的一個(gè)實(shí)例：旋轉(zhuǎn)矩形
canvas的transform.gif
- 首先canvas畫(huà)布的旋轉(zhuǎn)中心在左上角，所以我們需要把矩形的旋轉(zhuǎn)中心和左上角重合舌劳，比如原來(lái)矩形的坐標(biāo)是x：300帚湘，y：200，矩形寬高是w：200甚淡，h：150大诸，那么我們需要把矩形中心畫(huà)到畫(huà)布左上角：x：-w/2=-100，y：-h/2=75贯卦，然后在移動(dòng)畫(huà)布到原來(lái)的坐標(biāo)x：300+100=300资柔，200+75=275，注意這里要先旋轉(zhuǎn)畫(huà)布撵割，在移動(dòng)畫(huà)布贿堰，但是寫(xiě)的時(shí)候先寫(xiě)移動(dòng)，在寫(xiě)旋轉(zhuǎn)睁枕。
- 同樣的官边，在畫(huà)出來(lái)之前需要先全部清掉沸手。然后重畫(huà)外遇，然后在清掉注簿，在重畫(huà)，這樣不停的重復(fù)跳仿，因?yàn)榻嵌仍诓粩嗟淖兓羁剩宰詈缶蜁?huì)有動(dòng)畫(huà)的效果了
- 還有一點(diǎn)在清掉重畫(huà)之前我們需要保存上一次的繪畫(huà)狀態(tài)，然后在這次繪畫(huà)狀態(tài)之上在畫(huà)下一步菲语，不然的話妄辩，循環(huán)就是不停的在一個(gè)地方重畫(huà)。
代碼貼上去山上，原理是這樣眼耀，但是說(shuō)實(shí)話，這段代碼我沒(méi)怎么看懂(￣_￣|||)
就是 obj.save() 和obj.resatore() 這個(gè)地方佩憾，哪位大神可以解釋下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background: gray;
text-align: center;
}
</style>
<script>
window.onload = function () {
let c1 = document.getElementsByTagName('canvas')[0];
let gd = c1.getContext('2d');
function d2a(n) {//角度轉(zhuǎn)弧度
return n * Math.PI / 180;
}
function a2d(n) {//弧度轉(zhuǎn)角度
return n * 180 / Math.PI;
}
let r=0;
requestAnimationFrame(next);
function next() {
gd.clearRect(0, 0, c1.width, c1.height);
gd.save();//保存當(dāng)前的畫(huà)布狀態(tài)
gd.translate(500, 275);
gd.rotate(d2a(r++));
gd.strokeStyle='orange';
gd.strokeRect(-100, -75, 200, 150);
gd.restore();//恢復(fù)上一次保存的畫(huà)布狀態(tài)
requestAnimationFrame(next);
}
}
</script>
</head>
<body>
<canvas width="800" height="600" style="background:white;"></canvas>
</body>
</html>
下面這個(gè)是可以轉(zhuǎn)多個(gè)矩形的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background: gray;
text-align: center;
}
</style>
<script>
window.onload = function () {
let c1 = document.getElementsByTagName('canvas')[0];
let gd = c1.getContext('2d');
function d2a(n) {//角度轉(zhuǎn)弧度
return n * Math.PI / 180;
}
function a2d(n) {//弧度轉(zhuǎn)角度
return n * 180 / Math.PI;
}
let datas = [
{ x: 300, y: 300, w: 200, h: 100, s: 1 },
{ x: 200, y: 100, w: 100, h: 50, s: 1 },
{ x: 250, y: 50, w: 50, h: 100, s: 5 }
];//矩形數(shù)據(jù)哮伟，s表示speed，旋轉(zhuǎn)速度
requestAnimationFrame(next);
let r=0;
function next() {
gd.clearRect(0, 0, c1.width, c1.height);//清除畫(huà)布
datas.forEach(data => {
gd.save();//保存當(dāng)前的畫(huà)布狀態(tài)
gd.translate(data.x, data.y);
gd.rotate(d2a(r++*data.s/10));//旋轉(zhuǎn)速度在這里調(diào)
gd.strokeStyle = 'orange';
gd.strokeRect(-data.w / 2, -data.h / 2, data.w, data.h);
gd.restore();//恢復(fù)上一次保存的畫(huà)布狀態(tài)
});
requestAnimationFrame(next);
}
}
</script>
</head>
<body>
<canvas width="800" height="600" style="background:white;"></canvas>
</body>
</html>
canvas多個(gè)物體旋轉(zhuǎn).gif
