canvas星空和圖形變換
阿新 • • 發佈：2019-01-17
圖形變換。
一、畫一片星空
先畫一片canvas.width寬canvas.height高的黑色星空，再畫200個隨機位置，隨機大小，隨機旋轉角度的星星。
View Code
產生一個扁平化設計中200個星星的效果。
二、影象變換和狀態儲存
1、用標準路徑+圖形變換思想重構
上面drawStar函式承載的功能太多來，整個繪製路徑的指定，同時把五角星的位移，大小，旋轉多少度全部揉合在一個函式裡了。
假如需要變為畫一個四角形？六角形？程式碼改起來就比較麻煩了。
標準做法：修改函式結構。
介面不變，省去了旋轉角度，畫一個標準星星。假設外圓半徑是內圓半徑的兩倍，所以只需要傳入一個小r。drawStar裡呼叫一個startPath()函式來繪製一個標準五角星的路徑。
標準的五角星路徑：只傳入一個context，在(0,0)的位置繪製來一個大圓半徑為1，同時沒有任何偏移，任何旋轉的的五角星。
在drawStar裡勾繪出標準五角星後再通過圖形變換使得標準五角星的位移變成在(x,y)的位置，大小變成R這麼大，同時旋轉rot角度。再進行具體的繪製。
這樣一個設計的結構可以避免之前的問題。比如需求變成要畫六角形，四角形，只需要把starPath()裡面路徑勾繪的程式碼進行相應的更改即可。
更高階的複用：starPath()函式以引數的形式傳入drawStar()中。這樣drawStar可以叫drawSheap使用者可以繪製任意的圖形，只需要傳入繪製圖形的標準路徑，變更的位移量，大小量，旋轉量即可。
複製程式碼
//rot順時針旋轉的角度
function drawStar(ctx,x,y,r,R,rot){
starPath(ctx);
//繪製在(x,y)大小為R，旋轉rot度的五角星
//...
}
function starPath(ctx){
ctx.beginPath();
//角度轉弧度：除以180*PI
for(var i=0;i<5;i++){
ctx.lineTo(Math.cos((18+i*72)/180*Math.PI),
-Math.sin((18+i*72)/180*Math.PI));
ctx.lineTo(Math.cos((54+i*72)/180*Math.PI),
-Math.sin((54+i*72)/180*Math.PI));
}
ctx.closePath();
}
複製程式碼
總結：圖形學裡繪製先繪製標準路徑，再通過圖形變換成需求大小。
2，圖形變換
三種基本操作：
位移translate(x,y)
旋轉rotate(deg)
縮放 scale(sx,sy)
translate會疊加
綠色正方形位置經過2次translate後到達了(200,200)。並不是程式碼裡看起來的(150,150)。
View Code
為了避免上述問題，最佳實踐是使用圖形變換之後，再反向操作把圖形變換的結果逆轉過來。如下：
View Code
3，canvas狀態的儲存save()和恢復restore()
逆轉圖形變換太麻煩了，canvas提供了一個save()API,儲存當前的圖形狀態，狀態包括所有我們設定的狀態，自然也包括圖形變換的狀態。
在完成圖形變換並且具體繪製以後，在最後再呼叫一次context.restore()。
restore()和save()是成對出現的，restore()返回在save()時候canvas的所有狀態， 這是一個非常好的保持canvas繪圖狀態的方法，在save()和restore()之間可以隨意的更改canvas的狀態而不影響後續的繪製效果。
複製程式碼
window.onload=function(){
var canvas=document.getElementById("canvas");
canvas.width=400;
canvas.height=400;
var context=canvas.getContext(www.douniu178.com"2d");
context.save(www.taohuayuan178.com );
context.fillStyle="red";
context.translate(50,50);
context.fillRect(0,0,200,200);
//context.translate(-50,-50);//反向操作
context.restore(www.dashuju178.com);
context.save()
context.fillStyle="green";
context.translate(150,150);
context.fillRect(0,0,200,200);
// context.translate(-150,-150);//反向操作
context.restore();
}
複製程式碼
Note:繪製整體元素，特別是在其中使用圖形變換的時候，都應該先save()一下，最終結束繪製時再restore()一下以保證canvas圖形繪製的正確。
三、應用translate，rotate和scale
1、使用translate和rotate繪製固定大小星星的星空
沒有用scale.
ctx.translate(x,y);
ctx.rotate(rot/180*Math.PI);
View Code
效果和上面圖片一樣。
2、scale副作用
不僅放在大小，還會放大座標，邊框等。
複製程式碼
var canvas=document.getElementById("canvas");
canvas.width=400;
canvas.height=400;
var context=canvas.getContext("2d");
context.save();
context.scale(1,1);
context.strokeRect(10,10,100,100);
context.restore();
context.save()
context.scale(2,2,);
context.strokeRect(10,10,100,100);
context.restore();
context.save()
context.scale(3,3,);
context.strokeRect(10,10,100,100);
context.restore();
}
複製程式碼
3， 應用scale繪製星空
座標是通過translate變換的，始終是(0,0)所以scale後還是(0,0)。
放棄外邊框的繪製。
View Code
星星沒有外邊框。
四、深入理解圖形變換
圖形變換的實質是對圖形的頂點座標的再計算。計算過程通過變換矩陣來完成。
二維的變換矩陣是3*3，三維的變換矩陣是4*4。
使用transform(a,b,c,d,e,f)設定變換矩陣每次設定是在之前的基礎上設定的。
可以用setTransform(a,b,c,d,e,f))忽略掉之前所有的變換矩陣。先設定為單位矩陣再變換。
複製程式碼
window.onload=function(){
var canvas=document.getElementById("canvas");
canvas.width=400;
canvas.height=400;
var context=canvas.getContext("2d");
context.fillStyle="red";
context.strokeStyle="#058";
context.lineWidth=5;
/////////////////////////////
// a c e
// b d f
// 0 0 1
/////////////////////////////
// a,d 水平，垂直縮放
// b,c 水平，垂直傾斜
// e,f 水平，垂直位移
/////////////////////////////
context.save();
// context.transform(1,0,0,1,0,0);
//transform級聯操作
context.transform(1,0,0,1,50,100);
context.transform(2,0,0,1.5,0,0);
context.transform(1,-0.2,-0.2,1,0,0);
//setTransform()只使用當前變換
context.setTransform(1,0,0,1,100,100);
context.fillRect(50,50,100,100);
context.strokeRect(50,50,100,100);
context.restore(www.douniu157.com);
}
複製程式碼
這部分內容和css3的動畫的內容本質都是一樣的，都是圖形學的內容。
css3動畫可以參考我之前的部落格：
css3中變形與動畫（一）
css3中變形與動畫（二）
css3中變形與動畫（三）
本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.www.boshenyl.cn /starof/p/8626422.html 有問題歡迎與我討論，共同進步。
一、畫一片星空
先畫一片canvas.width寬canvas.height高的黑色星空，再畫200個隨機位置，隨機大小，隨機旋轉角度的星星。
View Code
產生一個扁平化設計中200個星星的效果。
二、影象變換和狀態儲存
1、用標準路徑+圖形變換思想重構
上面drawStar函式承載的功能太多來，整個繪製路徑的指定，同時把五角星的位移，大小，旋轉多少度全部揉合在一個函式裡了。
假如需要變為畫一個四角形？六角形？程式碼改起來就比較麻煩了。
標準做法：修改函式結構。
介面不變，省去了旋轉角度，畫一個標準星星。假設外圓半徑是內圓半徑的兩倍，所以只需要傳入一個小r。drawStar裡呼叫一個startPath()函式來繪製一個標準五角星的路徑。
標準的五角星路徑：只傳入一個context，在(0,0)的位置繪製來一個大圓半徑為1，同時沒有任何偏移，任何旋轉的的五角星。
在drawStar裡勾繪出標準五角星後再通過圖形變換使得標準五角星的位移變成在(x,y)的位置，大小變成R這麼大，同時旋轉rot角度。再進行具體的繪製。
這樣一個設計的結構可以避免之前的問題。比如需求變成要畫六角形，四角形，只需要把starPath()裡面路徑勾繪的程式碼進行相應的更改即可。
更高階的複用：starPath()函式以引數的形式傳入drawStar()中。這樣drawStar可以叫drawSheap使用者可以繪製任意的圖形，只需要傳入繪製圖形的標準路徑，變更的位移量，大小量，旋轉量即可。
複製程式碼
//rot順時針旋轉的角度
function drawStar(ctx,x,y,r,R,rot){
starPath(ctx);
//繪製在(x,y)大小為R，旋轉rot度的五角星
//...
}
function starPath(ctx){
ctx.beginPath();
//角度轉弧度：除以180*PI
for(var i=0;i<5;i++){
ctx.lineTo(Math.cos((18+i*72)/180*Math.PI),
-Math.sin((18+i*72)/180*Math.PI));
ctx.lineTo(Math.cos((54+i*72)/180*Math.PI),
-Math.sin((54+i*72)/180*Math.PI));
}
ctx.closePath();
}
複製程式碼
總結：圖形學裡繪製先繪製標準路徑，再通過圖形變換成需求大小。
2，圖形變換
三種基本操作：
位移translate(x,y)
旋轉rotate(deg)
縮放 scale(sx,sy)
translate會疊加
綠色正方形位置經過2次translate後到達了(200,200)。並不是程式碼裡看起來的(150,150)。
View Code
為了避免上述問題，最佳實踐是使用圖形變換之後，再反向操作把圖形變換的結果逆轉過來。如下：
View Code
3，canvas狀態的儲存save()和恢復restore()
逆轉圖形變換太麻煩了，canvas提供了一個save()API,儲存當前的圖形狀態，狀態包括所有我們設定的狀態，自然也包括圖形變換的狀態。
在完成圖形變換並且具體繪製以後，在最後再呼叫一次context.restore()。
restore()和save()是成對出現的，restore()返回在save()時候canvas的所有狀態， 這是一個非常好的保持canvas繪圖狀態的方法，在save()和restore()之間可以隨意的更改canvas的狀態而不影響後續的繪製效果。
複製程式碼
window.onload=function(){
var canvas=document.getElementById("canvas");
canvas.width=400;
canvas.height=400;
var context=canvas.getContext(www.douniu178.com"2d");
context.save(www.taohuayuan178.com );
context.fillStyle="red";
context.translate(50,50);
context.fillRect(0,0,200,200);
//context.translate(-50,-50);//反向操作
context.restore(www.dashuju178.com);
context.save()
context.fillStyle="green";
context.translate(150,150);
context.fillRect(0,0,200,200);
// context.translate(-150,-150);//反向操作
context.restore();
}
複製程式碼
Note:繪製整體元素，特別是在其中使用圖形變換的時候，都應該先save()一下，最終結束繪製時再restore()一下以保證canvas圖形繪製的正確。
三、應用translate，rotate和scale
1、使用translate和rotate繪製固定大小星星的星空
沒有用scale.
ctx.translate(x,y);
ctx.rotate(rot/180*Math.PI);
View Code
效果和上面圖片一樣。
2、scale副作用
不僅放在大小，還會放大座標，邊框等。
複製程式碼
var canvas=document.getElementById("canvas");
canvas.width=400;
canvas.height=400;
var context=canvas.getContext("2d");
context.save();
context.scale(1,1);
context.strokeRect(10,10,100,100);
context.restore();
context.save()
context.scale(2,2,);
context.strokeRect(10,10,100,100);
context.restore();
context.save()
context.scale(3,3,);
context.strokeRect(10,10,100,100);
context.restore();
}
複製程式碼
3， 應用scale繪製星空
座標是通過translate變換的，始終是(0,0)所以scale後還是(0,0)。
放棄外邊框的繪製。
View Code
星星沒有外邊框。
四、深入理解圖形變換
圖形變換的實質是對圖形的頂點座標的再計算。計算過程通過變換矩陣來完成。
二維的變換矩陣是3*3，三維的變換矩陣是4*4。
使用transform(a,b,c,d,e,f)設定變換矩陣每次設定是在之前的基礎上設定的。
可以用setTransform(a,b,c,d,e,f))忽略掉之前所有的變換矩陣。先設定為單位矩陣再變換。
複製程式碼
window.onload=function(){
var canvas=document.getElementById("canvas");
canvas.width=400;
canvas.height=400;
var context=canvas.getContext("2d");
context.fillStyle="red";
context.strokeStyle="#058";
context.lineWidth=5;
/////////////////////////////
// a c e
// b d f
// 0 0 1
/////////////////////////////
// a,d 水平，垂直縮放
// b,c 水平，垂直傾斜
// e,f 水平，垂直位移
/////////////////////////////
context.save();
// context.transform(1,0,0,1,0,0);
//transform級聯操作
context.transform(1,0,0,1,50,100);
context.transform(2,0,0,1.5,0,0);
context.transform(1,-0.2,-0.2,1,0,0);
//setTransform()只使用當前變換
context.setTransform(1,0,0,1,100,100);
context.fillRect(50,50,100,100);
context.strokeRect(50,50,100,100);
context.restore(www.douniu157.com);
}
複製程式碼
這部分內容和css3的動畫的內容本質都是一樣的，都是圖形學的內容。
css3動畫可以參考我之前的部落格：
css3中變形與動畫（一）
css3中變形與動畫（二）
css3中變形與動畫（三）
本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.www.boshenyl.cn /starof/p/8626422.html 有問題歡迎與我討論，共同進步。