JavaScript動畫實例：旋轉的正三角形

時間 2020-07-16

標籤 javascript 動畫實例旋轉正三角形欄目 JavaScript 简体版

原文原文鏈接

給定一個正三角形的重心座標爲（x0,y0），高爲h，能夠用以下的語句繪製一個底邊水平的正三角形。javascript

ctx.beginPath();html

ctx.moveTo(x0,y0-h*2/3);java

ctx.lineTo(x0+h/Math.sqrt(3), y0+h/3); canvas

ctx.lineTo(x0-h/Math.sqrt(3), y0+h/3);瀏覽器

ctx.lineTo(x0,y0-h*2/3);動畫

ctx.closePath();spa

ctx.stroke();3d

給定正三角形個數count，經過循環的方式能夠繪製出count個重心相同、高度不一樣正三角形。編寫以下的HTML代碼。rest

<!DOCTYPE html>htm

<html>

<head>

<title>重心相同高度不一樣的正三角形</title>

</head>

<body>

</canvas>

var canvas=document.getElementById('myCanvas');

ctx= canvas.getContext('2d');

var height=360;

var x0=250;

var y0=(500-height)/2-(height/7)+(height*2/3);

var count=4;

ctx.lineWidth=1;

ctx.fillStyle="#FF3388";

ctx.strokeStyle="#FFFFFF";

for (var i=0;i<count;i++)

{

var nHeight = height-(height/count)*i;

ctx.beginPath();

ctx.moveTo(x0,y0-nHeight*2/3);

ctx.lineTo(x0+nHeight/Math.sqrt(3), y0+nHeight/3);

ctx.lineTo(x0-nHeight/Math.sqrt(3), y0+nHeight/3);

ctx.lineTo(x0,y0-nHeight*2/3);

ctx.closePath();

ctx.stroke();

ctx.fill();

};

</script>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出如圖1所示的4個重心相同高度不一樣的正三角形。

圖1 4個重心相同高度不一樣的正三角形

若將圖1中除最外層的三角形固定不動外，其他的3個正三角形繞重心進行旋轉，會產生怎樣的效果呢？

編寫以下的HTML代碼。

<!DOCTYPE html>

<html>

<head>

<title>旋轉的正三角形</title>

</head>

<body>

</canvas>

var canvas=document.getElementById('myCanvas');

ctx= canvas.getContext('2d');

var height=360;

var x0=250;

var y0=(500-height)/2-(height/7)+(height*2/3);

var count=4;

var speed=2;

ctx.lineWidth=1;

ctx.fillStyle="#FF3388";

ctx.strokeStyle="#FFFFFF";

var j = 0;

function draw()

{

ctx.clearRect(0,0,500,500);

ctx.save();

for (var i=0;i<=count;i++)

{

var nHeight = height-(height/count)*i;

ctx.translate(x0,y0);

ctx.rotate(i*j/(80*speed));

ctx.translate(-x0,-y0);

ctx.beginPath();

ctx.moveTo(x0,y0-nHeight*2/3);

ctx.lineTo(x0+nHeight/Math.sqrt(3), y0+nHeight/3);

ctx.lineTo(x0-nHeight/Math.sqrt(3), y0+nHeight/3);

ctx.lineTo(x0,y0-nHeight*2/3);

ctx.closePath();

ctx.stroke();

ctx.fill();

};

ctx.restore();

j++;

if (j>100000) j=0;

}

function move()

{

draw();

requestAnimationFrame(move);

}

move();

</script>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中呈現出如圖2所示重心相同高度不一樣的正三角形繞重心旋轉的動畫效果。

圖2 正三角形繞重心旋轉效果（一）

若將上面程序中語句「var speed=2;」改寫爲「var speed=-2;」，其他部分保持不變，則正三角形會逆時針旋轉，如圖3所示。

圖3 正三角形繞重心旋轉效果（二）

若將增長旋轉的三角形的個數並適當調低旋轉速度的級別，即修改語句：

「var count=4; var speed=2;」爲「var count=20; var speed=12;」，其他部分保持不變，則在畫布中呈現出如圖4所示的正三角形旋轉效果。

圖4 正三角形繞重心旋轉效果（三）

由圖二、3或4能夠看出，正三角形繞重心旋轉時，越小的三角形旋轉得越快。若將全部的正三角形都用同一種角速度進行旋轉，即簡單地修改語句「ctx.rotate(i*j/(80*speed));」爲「ctx.rotate(j/(80*speed));」，則在畫布中呈現出如圖5所示的正三角形旋轉效果。

圖5 正三角形繞重心旋轉效果（四）

若爲旋轉的正三角形設置裁切區域，使得旋轉超出最外層三角形的部分均不可見。編寫以下的HTML文件。

<!DOCTYPE html>

<html>

<head>

<title>旋轉的正三角形</title>

</head>

<body>

</canvas>

var canvas=document.getElementById('myCanvas');

ctx= canvas.getContext('2d');

var height=360;

var x0=250;

var y0=(500-height)/2-(height/7)+(height*2/3);

var count=24;

var speed=18;

ctx.lineWidth=2;

ctx.fillStyle="#FF3388";

ctx.strokeStyle="#FFFFFF";

var j = 0;

function draw()

{

ctx.clearRect(0,0,500,500);

ctx.save();

for (var i=0;i<=count;i++)

{

var nHeight = height-(height/count)*i;

ctx.beginPath();

ctx.moveTo(x0,y0-nHeight*2/3);

ctx.lineTo(x0+nHeight/Math.sqrt(3), y0+nHeight/3);

ctx.lineTo(x0-nHeight/Math.sqrt(3), y0+nHeight/3);

ctx.lineTo(x0,y0-nHeight*2/3);

ctx.closePath();

ctx.clip();

ctx.translate(x0,y0);

ctx.rotate(i*j/(80*speed));

ctx.translate(-x0,-y0);

ctx.beginPath();

ctx.moveTo(x0,y0-nHeight*2/3);

ctx.lineTo(x0+nHeight/Math.sqrt(3), y0+nHeight/3);

ctx.lineTo(x0-nHeight/Math.sqrt(3), y0+nHeight/3);

ctx.lineTo(x0,y0-nHeight*2/3);

ctx.closePath();

ctx.stroke();

ctx.fill();

};

ctx.restore();

j++;

if (j>1000) j=0;

}

function move()

{

draw();

requestAnimationFrame(move);

}

move();

</script>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中呈現出如圖6所示旋轉效果。

圖6 正三角形內的旋轉

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。