溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

HTML5CANVAS中的SAVE和RESTORE的原理詳解和應(yīng)用

發(fā)布時間：2020-06-08 05:54:59 來源：網(wǎng)絡(luò) 閱讀：561 作者：elick 欄目：移動開發(fā)

save是保存當(dāng)前繪圖狀態(tài)，并把它壓入一個堆棧 restore是恢復(fù)上次保存的繪圖狀態(tài)，從堆棧彈出。

關(guān)鍵在于繪圖狀態(tài)，它是指Canvas的平移、放縮、旋轉(zhuǎn)、錯切、裁剪等操作或者顏色、線條等樣式。

堆棧原理，restore次數(shù)不能多于save。

那一個100*100的畫布



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.onload = function(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.translate(50, 50);
context.save();              //坐標(biāo)原點移到畫布中心，并保存這個狀態(tài)
context.rotate(Math.PI/2);    //旋轉(zhuǎn)90度
context.beginPath();
context.moveTo(0, -50);
context.lineTo(-50, 0);
context.moveTo(0, -50);
context.lineTo(50, 0);
context.moveTo(0, -50);
context.lineTo(0, 50);
context.closePath();          //畫一個向右的箭頭
context.restore();
context.fillRect(40, 40, 10, 10);  //畫一點，restore后點在右下角，沒有restore剛點在左下角，如圖
context.stroke();
}



HTML5CANVAS中的SAVE和RESTORE的原理詳解和應(yīng)用



所以不進行save跟restore的話，所有操作都是在旋轉(zhuǎn)90度后的。

以上內(nèi)容轉(zhuǎn)自點點網(wǎng)上的Rex


說實話這個哥們講解的實在太簡略,沒太看懂什么意思 于是我在他基礎(chǔ)上改了幾次代碼 發(fā)現(xiàn)了這個restore用處所在

顯卡運行后效果

查看效果


HTML5CANVAS中的SAVE和RESTORE的原理詳解和應(yīng)用

ps:為方便比對效果,其最后兩個為動畫效果

從上面圖片就會發(fā)現(xiàn),未旋轉(zhuǎn)時,圖形是一樣的,可是一旋轉(zhuǎn)起來,右下角黑點的位置就變化了.這就是關(guān)鍵所在

看上面代碼你會發(fā)現(xiàn).在rotate()前面會save一下


1
2
context.save();              
//坐標(biāo)原點移到畫布中心，并保存這個狀態(tài) context.rotate(Math.PI/2)


這樣其實可以簡單的理解為保存當(dāng)前畫布狀態(tài),更直白的說就是保存當(dāng)前坐標(biāo)系.

當(dāng)沒有rotate()的時候,整個坐標(biāo)系就會旋轉(zhuǎn)90度這是再繪畫上黑點就會出現(xiàn)在箭頭左側(cè) 也就是旋轉(zhuǎn)坐標(biāo)系后的位置


如果rotate()的話 就會恢復(fù)save()之前的坐標(biāo)系,這時繪制黑點就會出現(xiàn)在初始坐標(biāo)的位置上,而只要箭頭是旋轉(zhuǎn)坐標(biāo)系了.其他的畫布狀態(tài)還是初始的樣子


不知道,這么說是否所有人都理解.其實簡單看下動畫效果就能夠明白了

查看效果


這里順便說下,通過動畫效果我們會發(fā)現(xiàn),兩個圖形旋轉(zhuǎn)起來并不是相同的,帶rotate()的圖形很利于我們做動畫效果,比如行走,煽動翅膀這種只需要兩個圖片的動作,這樣交替執(zhí)行就會變成動畫了.所以這是這個函數(shù)的實際應(yīng)用之處.

我的源碼已經(jīng)打包上傳了,里面還有進一步的注釋.不明白的同學(xué)可以下載看看.

最后說一下,以上都是我個人理解 如果有不對之處歡迎指正,在這里先謝謝達人同學(xué)了.


×××


向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手