JavaScript圖片旋轉(zhuǎn)效果實(shí)現(xiàn)方法詳解
在Canvas API中，上下文CanvasRenderingContext2D對象提供了一個與坐標(biāo)旋轉(zhuǎn)相關(guān)的方法：
void rotate(in float angle); // 按給定的弧度順時針旋轉(zhuǎn)angle
rotate（）方法旋轉(zhuǎn)的中心始終是canvas的原點(diǎn)。如果要改變旋轉(zhuǎn)中心，需要使用translate方法。
我們可以將繪制的圖形每隔一定的時間間隔后，旋轉(zhuǎn)一定的角度重新繪制一次，這樣就可以得到旋轉(zhuǎn)的動畫效果。
1．旋轉(zhuǎn)的扇葉
將一個梯形按順時針旋轉(zhuǎn)90°的方式繪制4次，可以繪制出一個扇葉圖案。將繪制的扇葉圖案每隔0.1秒后順時針旋轉(zhuǎn)12°，重新繪制一遍，得到旋轉(zhuǎn)的扇葉動畫。
編寫如下的HTML代碼。
<!DOCTYPE html><head><title>旋轉(zhuǎn)的扇葉</title><script type='text/javascript'>var context;var i;function draw(id){var canvas = document.getElementById(id);if (canvas == null)return false;context = canvas.getContext(’2d’);i = 3;setInterval(move, 100);}function move(){context.clearRect(0, 0, 400, 300);context.save();context.fillStyle = ’green’;context.translate(100, 100);context.rotate(i * Math.PI / 45)drawLeaf();i += 3;if (i >= 90) i = 3;context.restore();}function drawLeaf() // 繪制扇葉{context.save();for (var j = 0; j < 4; j++){context.rotate(Math.PI / 2);context.beginPath();context.moveTo(-20, -80);context.lineTo(0, -80);context.lineTo(0, 0);context.lineTo(-30, 0);context.closePath();context.fill();}context.restore();}</script></head><body onload='draw(’myCanvas’);'><canvas height='200'style='border:3px double #996633;'></canvas></body></html>
將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，可以在瀏覽器窗口中看到扇葉的旋轉(zhuǎn)動畫，如圖1所示。
圖1 旋轉(zhuǎn)的扇葉
2．旋轉(zhuǎn)的五角星
將繪制的五角星圖案每隔0.1秒后順時針旋轉(zhuǎn)12°，重新繪制一遍，得到旋轉(zhuǎn)的五角星動畫。
編寫如下的HTML代碼。
<!DOCTYPE html><head><title>旋轉(zhuǎn)的五角星</title><script type='text/javascript'>var context;var i;function draw(id){var canvas = document.getElementById(id);if (canvas == null)return false;context = canvas.getContext(’2d’);i = 3;setInterval(move, 100);}function move(){context.clearRect(0, 0, 400, 300);context.save();context.fillStyle = ’green’;context.translate(100, 100);context.rotate(i * Math.PI / 45)drawStar(80);i += 3;if (i >= 90) i = 3;context.restore();}function drawStar(r) // 繪制五角星圖案{context.save();context.fillStyle = 'red';context.beginPath();context.moveTo(r, 0);for (var i = 0; i < 9; i++){context.rotate(Math.PI / 5);if (i % 2 == 0)context.lineTo((r / 2), 0);elsecontext.lineTo(r, 0);}context.closePath();context.fill();context.restore();}</script></head><body onload='draw(’myCanvas’);'><canvas height='200'style='border:3px double #996633;'></canvas></body></html>
將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，可以在瀏覽器窗口中看到五角星的旋轉(zhuǎn)動畫，如圖2所示。
圖2 旋轉(zhuǎn)的五角星
3．旋轉(zhuǎn)的正六邊形漩渦
我們先來畫一個正六邊形。這樣作圖，設(shè)從起點(diǎn)向繪圖方向畫一條長為i的線段，將線段的終點(diǎn)設(shè)為新的起點(diǎn)，同時繪圖方向旋轉(zhuǎn)60°，再畫一條長為i+1的線段，重復(fù)這樣的過程共繪制六條線段，則這六條線段構(gòu)成一個正六邊形。
編寫HTML文件內(nèi)容如下。
<!DOCTYPE html><head><title>正六邊形</title><script type='text/javascript'>function draw(id){var canvas = document.getElementById(id);if (canvas == null)return false;var context = canvas.getContext(’2d’);context.fillStyle = '#EEEEFF';context.fillRect(0, 0, 400, 400);context.translate(canvas.width / 2,canvas.height / 2);var colors = [’red’, ’yellow’,’green’, ’cyan’, ’blue’, ’purple’];for (i = 150; i < 156; i++){context.strokeStyle = colors[i % 6];context.lineWidth = 2;context.beginPath();context.moveTo(0, 0);context.lineTo(0, i / 2);context.stroke();context.translate(0, i / 2);context.rotate(-60 * (2 * Math.PI /360));}}</script></head><body onload='draw(’myCanvas’);'><canvas height='400'style='border:3px double #996633;'></canvas></body></html>
將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，可以在畫布中繪制一個正六邊形圖案，如圖3所示。
圖3 一個正六邊形
繪制圖3的程序中，循環(huán)進(jìn)行了6次，只繪制6條邊。若修改“for (i =150; i < 156; i++)”語句為“for (i =150; i < 180; i++)”，使得循環(huán)進(jìn)行30次，則在畫布中繪制出如圖4所示的圖案，該圖案有5個六邊形圍成。若修改語句為“for (i =0; i < 360; i++)”，則在畫布中繪制出如圖5所示的六邊形圖案。
圖4 5個六邊形圍成的圖案
圖5 正六邊形
生成圖5圖案的程序中，繪圖時旋轉(zhuǎn)的角度為60°，若將旋轉(zhuǎn)角度改成59°，即將語句“context.rotate(-60 * (2 * Math.PI / 360));”修改為“context.rotate(-59 * (2 * Math.PI / 360));”，則在畫布中繪制出如圖6所示的正六邊形漩渦。
圖6 正六邊形漩渦
將圖6的正六邊形漩渦旋轉(zhuǎn)起來。編寫如下的HTML文件。
<!DOCTYPE html><head><title>旋轉(zhuǎn)的正六邊形漩渦</title><script type='text/javascript'>var context;var count;function draw(id){var canvas = document.getElementById(id);if (canvas == null)return false;context = canvas.getContext(’2d’);count = 3;setInterval(move, 100);}function move(){context.clearRect(0, 0, 400, 400);context.save();context.translate(200, 200);context.rotate(count * Math.PI / 45)drawSix();count += 3;if (count >= 90) count = 3;context.restore();}function drawSix() // 繪制正六邊形漩渦圖案{context.save();var colors = [’red’, ’yellow’,’green’, ’cyan’, ’blue’, ’purple’];for (i = 0; i < 360; i++){context.strokeStyle = colors[i % 6];context.lineWidth = i / 200 + 1;context.beginPath();context.moveTo(0, 0);context.lineTo(0, i / 2);context.stroke();context.translate(0, i / 2);context.rotate(-59 * (2 * Math.PI /360));}context.restore();}</script></head><body onload='draw(’myCanvas’);'><canvas height='400'style='border:3px double #996633;'></canvas></body></html>
將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，可以在瀏覽器窗口中看到正六邊形漩渦的旋轉(zhuǎn)動畫，如圖7所示。
圖7所示的動畫顯得有些單調(diào)，我們修改上面的程序，使得在繪制正六邊形時的旋轉(zhuǎn)角度進(jìn)行變化，得到不斷轉(zhuǎn)呀轉(zhuǎn)的正六邊形。
編寫的HTML文件內(nèi)容如下。這個HTML文件的內(nèi)容與上一個HTML文件內(nèi)容，修改了兩處，為方便讀者引用，還是給出完整文件內(nèi)容。
圖7 正六邊形漩渦的旋轉(zhuǎn)動畫
<!DOCTYPE html><head><title>旋轉(zhuǎn)的正六邊形漩渦</title><script type='text/javascript'>var context;var count;function draw(id){var canvas = document.getElementById(id);if (canvas == null)return false;context = canvas.getContext(’2d’);count = 0;setInterval(move, 50);}function move(){context.clearRect(0, 0, 400, 400);context.save();context.translate(200, 200);context.rotate(count * Math.PI / 45)drawSix();count++;if (count >= 360) count = 0;context.restore();}function drawSix() // 繪制正六邊形漩渦圖案{context.save();var colors = [’red’, ’yellow’,’green’, ’cyan’, ’blue’, ’purple’];var rotation = (2 * Math.sin(count /(3.14 * 20)));for (i = 0; i < 360; i++){context.strokeStyle = colors[i % 6];context.lineWidth = i / 200 + 1;context.beginPath();context.moveTo(0, 0);context.lineTo(0, i / 2);context.stroke();context.translate(0, i / 2);context.rotate((-60 + rotation) * 2 *Math.PI / 360);}context.restore();}</script></head><body onload='draw(’myCanvas’);'><canvas height='400'style='border:3px double #996633;'></canvas></body></html>
將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，可以在瀏覽器窗口中看到一個更加生動的不斷轉(zhuǎn)呀轉(zhuǎn)的正六邊形漩渦的旋轉(zhuǎn)動畫，如圖8所示。
圖8 更生動的正六邊形漩渦的旋轉(zhuǎn)動畫
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. asp讀取xml文件和記數(shù)2. 多個SpringBoot項(xiàng)目采用redis實(shí)現(xiàn)Session共享功能3. Android CountDownTimer案例總結(jié)4. Python 中如何使用 virtualenv 管理虛擬環(huán)境5. vue 動態(tài)給每個頁面添加title、關(guān)鍵詞和描述的方法6. python利用opencv實(shí)現(xiàn)顏色檢測7. CSS自定義滾動條樣式案例詳解8. 每日六道java新手入門面試題,通往自由的道路第二天9. vue 驗(yàn)證兩次輸入的密碼是否一致的方法示例10. PHP實(shí)現(xiàn)基本留言板功能原理與步驟詳解
網(wǎng)公網(wǎng)安備