JavaScript圖片旋轉效果實現(xiàn)方法詳解
在Canvas API中，上下文CanvasRenderingContext2D對象提供了一個與坐標旋轉相關的方法：
void rotate(in float angle); // 按給定的弧度順時針旋轉angle
rotate（）方法旋轉的中心始終是canvas的原點。如果要改變旋轉中心，需要使用translate方法。
我們可以將繪制的圖形每隔一定的時間間隔后，旋轉一定的角度重新繪制一次，這樣就可以得到旋轉的動畫效果。
1．旋轉的扇葉
將一個梯形按順時針旋轉90°的方式繪制4次，可以繪制出一個扇葉圖案。將繪制的扇葉圖案每隔0.1秒后順時針旋轉12°，重新繪制一遍，得到旋轉的扇葉動畫。
編寫如下的HTML代碼。
<!DOCTYPE html>
<head>
<title>旋轉的扇葉</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文件，可以在瀏覽器窗口中看到扇葉的旋轉動畫，如圖1所示。
圖1 旋轉的扇葉
2．旋轉的五角星
將繪制的五角星圖案每隔0.1秒后順時針旋轉12°，重新繪制一遍，得到旋轉的五角星動畫。
編寫如下的HTML代碼。
<!DOCTYPE html>
<head>
<title>旋轉的五角星</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文件，可以在瀏覽器窗口中看到五角星的旋轉動畫，如圖2所示。
圖2 旋轉的五角星
3．旋轉的正六邊形漩渦
我們先來畫一個正六邊形。這樣作圖，設從起點向繪圖方向畫一條長為i的線段，將線段的終點設為新的起點，同時繪圖方向旋轉60°，再畫一條長為i+1的線段，重復這樣的過程共繪制六條線段，則這六條線段構成一個正六邊形。
編寫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圖案的程序中，繪圖時旋轉的角度為60°，若將旋轉角度改成59°，即將語句“context.rotate(-60 * (2 * Math.PI / 360));”修改為“context.rotate(-59 * (2 * Math.PI / 360));”，則在畫布中繪制出如圖6所示的正六邊形漩渦。
圖6 正六邊形漩渦
將圖6的正六邊形漩渦旋轉起來。編寫如下的HTML文件。
<!DOCTYPE html>
<head>
<title>旋轉的正六邊形漩渦</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文件，可以在瀏覽器窗口中看到正六邊形漩渦的旋轉動畫，如圖7所示。
圖7所示的動畫顯得有些單調，我們修改上面的程序，使得在繪制正六邊形時的旋轉角度進行變化，得到不斷轉呀轉的正六邊形。
編寫的HTML文件內(nèi)容如下。這個HTML文件的內(nèi)容與上一個HTML文件內(nèi)容，修改了兩處，為方便讀者引用，還是給出完整文件內(nèi)容。
圖7 正六邊形漩渦的旋轉動畫
<!DOCTYPE html>
<head>
<title>旋轉的正六邊形漩渦</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文件，可以在瀏覽器窗口中看到一個更加生動的不斷轉呀轉的正六邊形漩渦的旋轉動畫，如圖8所示。
圖8 更生動的正六邊形漩渦的旋轉動畫
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
bootstrap配合Masonry插件實現(xiàn)瀑布式布局
這篇文章主要為大家詳細介紹了bootstrap配合Masonry插件實現(xiàn)瀑布式布局，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
本文則嘗試利用SPARQLWrapper.js來讀取DBpedia的數(shù)據(jù)，并顯示出來,感興趣的你可以參考下，或許對你有所幫助2013-03-03
本文講的是函數(shù)閉包，不涉及對象閉包（如用with實現(xiàn)）。如果你覺得我說的有偏差，歡迎拍磚，歡迎指教。2010-07-07
在JS開發(fā)過程中,代碼可能存在一些語法或者邏輯上的錯誤,導致程序不能得到我們想要的結果,這時就需要我們找到并修復這些錯誤,我們將查找和修復錯誤的過程稱為調試或代碼調試,這篇文章主要給大家介紹了關于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
工廠模式定義一個用于創(chuàng)建對象的接口，這個接口由子類決定實例化哪一個類。接下來通過本文給大家介紹JavaScript設計模式經(jīng)典之工廠模式，感興趣的朋友一起學習吧2016-02-02
微信小程序五子棋游戲AI實現(xiàn)方法【附demo源碼下載】
這篇文章主要介紹了微信小程序五子棋游戲AI實現(xiàn)方法,結合實例形式分析了五子棋游戲中人機對戰(zhàn)的AI原理及相關實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2019-02-02
JavaScript實現(xiàn)把數(shù)字轉換成中文
這篇文章主要介紹了JavaScript實現(xiàn)把數(shù)字轉換成中文,本文直接給出實例代碼,需要的朋友可以參考下2015-06-06