JavaScript圖片旋轉(zhuǎn)效果實現(xiàn)方法詳解
在Canvas API中，上下文CanvasRenderingContext2D對象提供了一個與坐標旋轉(zhuǎn)相關(guān)的方法：
void rotate(in float angle); // 按給定的弧度順時針旋轉(zhuǎn)angle
rotate（）方法旋轉(zhuǎn)的中心始終是canvas的原點。如果要改變旋轉(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 id="myCanvas" width="200" 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);
else
context.lineTo(r, 0);
}
context.closePath();
context.fill();
context.restore();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="200" height="200"
style="border:3px double #996633;">
</canvas>
</body>
</html>
將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，可以在瀏覽器窗口中看到五角星的旋轉(zhuǎn)動畫，如圖2所示。
圖2 旋轉(zhuǎn)的五角星
3．旋轉(zhuǎn)的正六邊形漩渦
我們先來畫一個正六邊形。這樣作圖，設(shè)從起點向繪圖方向畫一條長為i的線段，將線段的終點設(shè)為新的起點，同時繪圖方向旋轉(zhuǎn)60°，再畫一條長為i+1的線段，重復這樣的過程共繪制六條線段，則這六條線段構(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 id="myCanvas" width="400" height="400"
style="border:3px double #996633;">
</canvas>
</body>
</html>
將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，可以在畫布中繪制一個正六邊形圖案，如圖3所示。
圖3 一個正六邊形
繪制圖3的程序中，循環(huán)進行了6次，只繪制6條邊。若修改“for (i =150; i < 156; i++)”語句為“for (i =150; i < 180; i++)”，使得循環(huá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 id="myCanvas" width="400" height="400"
style="border:3px double #996633;">
</canvas>
</body>
</html>
將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，可以在瀏覽器窗口中看到正六邊形漩渦的旋轉(zhuǎn)動畫，如圖7所示。
圖7所示的動畫顯得有些單調(diào)，我們修改上面的程序，使得在繪制正六邊形時的旋轉(zhuǎ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 id="myCanvas" width="400" 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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
bootstrap配合Masonry插件實現(xiàn)瀑布式布局
這篇文章主要為大家詳細介紹了bootstrap配合Masonry插件實現(xiàn)瀑布式布局，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
Javascript查詢DBpedia小應(yīng)用實例學習
本文則嘗試利用SPARQLWrapper.js來讀取DBpedia的數(shù)據(jù)，并顯示出來,感興趣的你可以參考下，或許對你有所幫助2013-03-03
本文講的是函數(shù)閉包，不涉及對象閉包（如用with實現(xiàn)）。如果你覺得我說的有偏差，歡迎拍磚，歡迎指教。2010-07-07
在JS開發(fā)過程中,代碼可能存在一些語法或者邏輯上的錯誤,導致程序不能得到我們想要的結(jié)果,這時就需要我們找到并修復這些錯誤,我們將查找和修復錯誤的過程稱為調(diào)試或代碼調(diào)試,這篇文章主要給大家介紹了關(guān)于JS?debug跳過的7種方法,需要的朋友可以參考下2023-07-07
javascript 隨機抽獎程序代碼,主要是利用了js的Math.random方法。需要的朋友可以參考下。2009-11-11
這篇文章主要介紹了webpack 4 升級遷移的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了JavaScript修改瀏覽器tab標題小技巧,需要的朋友可以參考下2015-01-01
JavaScript設(shè)計模式經(jīng)典之工廠模式
工廠模式定義一個用于創(chuàng)建對象的接口，這個接口由子類決定實例化哪一個類。接下來通過本文給大家介紹JavaScript設(shè)計模式經(jīng)典之工廠模式，感興趣的朋友一起學習吧2016-02-02
微信小程序五子棋游戲AI實現(xiàn)方法【附demo源碼下載】
這篇文章主要介紹了微信小程序五子棋游戲AI實現(xiàn)方法,結(jié)合實例形式分析了五子棋游戲中人機對戰(zhàn)的AI原理及相關(guān)實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2019-02-02
JavaScript實現(xiàn)把數(shù)字轉(zhuǎn)換成中文
這篇文章主要介紹了JavaScript實現(xiàn)把數(shù)字轉(zhuǎn)換成中文,本文直接給出實例代碼,需要的朋友可以參考下2015-06-06