在html5中,可以實現多種的圖形變換包括平移,縮放和旋轉。可以透過兩種方式,分別是矩陣法和函數法,以下分別介紹平移,縮放和旋轉用這兩種方法實現。
1.平移:
context.fillRect(50,50,50,50); context.translate(100,100); context.fillRect(50,50,50,50);
如果沒有中間這句你看到的效果會是只有一個矩形,因為第一個矩形和第二個矩形重合了,現在的效果是進行了平移,效果如下:
#首先,本篇介紹的方法都是狀態值,也就是說他的作用域會影響它下面的所有程式碼,也可以使用save和restore來儲存和彈出狀態。上面介紹的是呼叫函數來解決平移的問題,以下介紹矩陣法,我們可以使用context的transform方法來進行矩陣變化操作,它有六個參數,有些解釋喜歡把它們解釋為負責不同的操作,我更願意從整體上介紹這六個參數,也就是說分別在平移,縮放和旋轉時這些參數負責的是不同的,首先介紹整體,從整體上前四個參數負責縮放和旋轉,後兩個參數是平移,前四個參數1,# 4為一組,2#,#3為一組,1和2是x值,#3##和4是y值,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);在這裡第二句程式碼和第三句注掉的程式碼意義一樣,之所以要在
1,4這組和# #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)!