首頁  >  文章  >  web前端  >  Html5 Canvas初探學習筆記(6) -變換

Html5 Canvas初探學習筆記(6) -變換

黄舟
黄舟原創
2017-02-28 15:38:591385瀏覽

html5中,可以實現多種的圖形變換包括平移,縮放和旋轉。可以透過兩種方式,分別是矩陣法和函數法,以下分別介紹平移,縮放和旋轉用這兩種方法實現。

1.平移:

 context.fillRect(50,50,50,50);
 context.translate(100,100);
 context.fillRect(50,50,50,50);

 如果沒有中間這句你看到的效果會是只有一個矩形,因為第一個矩形和第二個矩形重合了,現在的效果是進行了平移,效果如下:



#首先,本篇介紹的方法都是狀態值,也就是說他的作用域會影響它下面的所有程式碼,也可以使用saverestore來儲存和彈出狀態。上面介紹的是呼叫函數來解決平移的問題,以下介紹矩陣法,我們可以使用contexttransform方法來進行矩陣變化操作,它有六個參數,有些解釋喜歡把它們解釋為負責不同的操作,我更願意從整體上介紹這六個參數,也就是說分別在平移,縮放和旋轉時這些參數負責的是不同的,首先介紹整體,從整體上前四個參數負責縮放和旋轉,後兩個參數是平移,前四個參數1# 4為一組,2#,#3為一組,12x值,#3##和4y值,56分別為x,y的平移,上面的程式碼如果用矩陣就按下面的方法寫:

context.fillRect(50,50,50,50);
context.transform(1,0,0,1,100,100);
//context.transform(0,1,1,0,100,100);
context.fillRect(50,50,50,50);

在這裡第二句程式碼和第三句注掉的程式碼意義一樣,之所以要在

14這組和# #2

3

這組中的一組裡寫

#1,是因為我們要保證矩形不被縮放,如果是

0

的話則大小被縮放為

0


2.縮放

 context.fillRect(50,50,50,50);
 context.translate(150,50);
 context.scale(0.5,0.5);
 context.fillRect(0,0,50,50);

縮放和旋轉都要用到平移,這是因為我們如果用如下的程式碼寫會出現問題

context.fillRect(50,50,50,50);
 context.scale(0.5,0.5);
 context.fillRect(150,50,50,50);

這個程式碼看起來和上面的程式碼一樣,但實際上不一樣,因為當你呼叫

context.scale

#以後,所有的座標都會縮放,會使原來的一半,所以就會和下面的效果不同

以下是第一段程式碼與第二段的比較:

######################## ###可以看出後一張圖發生了錯位。 ######下面介紹矩陣法:###
context.fillRect(50,50,50,50);
context.transform(0,0.5,0.5,0,150,50);
//context.transform(0.5,0,0,0.5,150,50);
context.fillRect(0,0,50,50);
###和上面的一樣,注掉的程式碼效果是一樣的,同樣的,也需要先平移,同樣的,第一個參數和第四個參數這組和第二個第三個參數這組是一樣的。 ######3.旋轉###
context.fillRect(50,50,50,50);
 context.translate(150,50);
 context.rotate(Math.PI/4);
 context.fillRect(0,0,50,50);
###如下的程式碼可以實現旋轉,同樣的原因,也需要先平移,旋轉的角度使用弧度製,效果如下:###



下面介绍的是使用矩阵法:

context.fillRect(50,50,50,50);
context.transform(Math.cos(Math.PI/4),Math.sin(Math.PI/4),-Math.sin(Math.PI/4),Math.cos(Math.PI/4),150,50);
//context.transform(-Math.sin(Math.PI/4),Math.cos(Math.PI/4),Math.cos(Math.PI/4)
//,Math.sin(Math.PI/4),150,50);
context.fillRect(0,0,50,50);

两组参数分别为cos旋转角,sin旋转角,负的sin旋转角,cos旋转角,或者为负的sin旋转角,cos旋转角,cos旋转角,sin旋转角。

如有错误,希望大家多多指正

 以上就是Html5 Canvas初探学习笔记(6) -变换的内容,更多相关内容请关注PHP中文网(www.php.cn)!


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn