JavaScript影片實體：轉呀轉-有解無憂

在Canvas API中，背景關系CanvasRenderingContext2D物件提供了一個與坐標旋轉相關的方法：

void rotate(in float angle); // 按給定的弧度順時針旋轉angle

rotate（）方法旋轉的中心始終是canvas的原點，如果要改變旋轉中心，需要使用translate方法，

我們可以將繪制的圖形每隔一定的時間間隔后，旋轉一定的角度重新繪制一次，這樣就可以得到旋轉的影片效果，

1．旋轉的扇葉

將一個梯形按順時針旋轉90°的方式繪制4次，可以繪制出一個扇葉圖案，將繪制的扇葉圖案每隔0.1秒后順時針旋轉12°，重新繪制一遍，得到旋轉的扇葉影片，

撰寫如下的HTML代碼，

<!DOCTYPE html>

<head>

<title>旋轉的扇葉</title>

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>

</canvas>

</body>

</html>

將上述HTML代碼保存到一個html文本檔案中，再在瀏覽器中打開包含這段HTML代碼的html檔案，可以在瀏覽器視窗中看到扇葉的旋轉影片，如圖1所示，

圖1 旋轉的扇葉

2．旋轉的五角星

將繪制的五角星圖案每隔0.1秒后順時針旋轉12°，重新繪制一遍，得到旋轉的五角星影片，

撰寫如下的HTML代碼，

<!DOCTYPE html>

<head>

<title>旋轉的五角星</title>

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>

</canvas>

</body>

</html>

將上述HTML代碼保存到一個html文本檔案中，再在瀏覽器中打開包含這段HTML代碼的html檔案，可以在瀏覽器視窗中看到五角星的旋轉影片，如圖2所示，

圖2 旋轉的五角星

3．旋轉的正六邊形漩渦

我們先來畫一個正六邊形，這樣作圖，設從起點向繪圖方向畫一條長為i的線段，將線段的終點設為新的起點，同時繪圖方向旋轉60°，再畫一條長為i+1的線段，重復這樣的程序共繪制六條線段，則這六條線段構成一個正六邊形，

撰寫HTML檔案內容如下，

<!DOCTYPE html>

<head>

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>

</canvas>

</body>

</html>

將上述HTML代碼保存到一個html文本檔案中，再在瀏覽器中打開包含這段HTML代碼的html檔案，可以在畫布中繪制一個正六邊形圖案，如圖3所示，

圖3 一個正六邊形

繪制圖3的程式中，回圈進行了6次，只繪制6條邊，若修改“for (i =150; i < 156; i++)”陳述句為“for (i =150; i < 180; i++)”，使得回圈進行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>

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>

</canvas>

</body>

</html>

將上述HTML代碼保存到一個html文本檔案中，再在瀏覽器中打開包含這段HTML代碼的html檔案，可以在瀏覽器視窗中看到正六邊形漩渦的旋轉影片，如圖7所示，

圖7所示的影片顯得有些單調，我們修改上面的程式，使得在繪制正六邊形時的旋轉角度進行變化，得到不斷轉呀轉的正六邊形，

撰寫的HTML檔案內容如下，這個HTML檔案的內容與上一個HTML檔案內容，修改了兩處，為方便讀者參考，還是給出完整檔案內容，

圖7 正六邊形漩渦的旋轉影片

<!DOCTYPE html>

<head>

<title>旋轉的正六邊形漩渦</title>

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>

</canvas>

</body>

</html>

將上述HTML代碼保存到一個html文本檔案中，再在瀏覽器中打開包含這段HTML代碼的html檔案，可以在瀏覽器視窗中看到一個更加生動的不斷轉呀轉的正六邊形漩渦的旋轉影片，如圖8所示，

圖8 更生動的正六邊形漩渦的旋轉影片

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/55563.html

標籤：JavaScript

上一篇：8.二叉樹的diff演算法，查看并輸出二叉樹不同的地方（JavaScript版）

下一篇：JavaScript圖形實體：玩轉正方形