JavaScript圖片旋轉(zhuǎn)效果實現(xiàn)方法詳解
在Canvas API中，上下文CanvasRenderingContext2D對象提供了一個與坐標(biāo)旋轉(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的線段，重復(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 id="myCanvas" width="400" 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 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)角度進(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 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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JavaScript獲取當(dāng)前cpu使用率的方法,涉及JavaScript針對系統(tǒng)硬件操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12
IE與現(xiàn)代瀏覽器在DOM中最大的差異是什么無疑就是event了。各個瀏覽器接口的差異以及夠頭疼了，而IE甚至Firefox早期版本由于內(nèi)存管理機(jī)制不完善，很容易在事件處理中導(dǎo)致內(nèi)存泄漏2011-10-10
JavaScript使用cookie...2007-02-02
下面小編就為大家?guī)硪黄猨s獲取元素的外鏈樣式的簡單實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)移動端tab切換時下劃線滑動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
JavaScript之生成器_動力節(jié)點Java學(xué)院整理
generator（生成器）是ES6標(biāo)準(zhǔn)引入的新的數(shù)據(jù)類型。一個generator看上去像一個函數(shù)，但可以返回多次，有興趣的可以了解一下。2017-06-06
這篇文章主要介紹了javascript顯示中文日期的方法,涉及javascript針對日期與字符串操作技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了JS常見錯誤(Error)及處理方案詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
聲明一個數(shù)值類型的變量我看到三種;我嘴角微微一笑：少年你還嫩了點，哪止三種，我知道的至少有五種,好奇的你可以參考下哈，希望本文可以幫助到你2013-02-02
在客戶端中，要對字符串編碼，可以采用：escape（）；encodeurl（）；encodeURIComponent（）；下面我們就來具體講解下這幾個方法。2015-05-05