JavaScript圖形實例：七彩線團

時間 2019-12-22

標籤 javascript 圖形實例七彩線團欄目 JavaScript 简体版

原文原文鏈接

1．線團圖案

設立座標計算公式爲：javascript

X=R1*COS(3α)+R2*COS(14α)）html

Y=R1*SIN(3α)+R2 *SIN(14α)）java

再用循環依次取α值爲0~2π（每次增量爲0.01），計算出X和Y,在canvas畫布中將座標點（X,Y）用線連起來，可繪製出一個封閉曲線圖形，可獲得一個線團圖案。canvas

編寫以下的HTML代碼。瀏覽器

<!DOCTYPE>3d

<html>htm

<head>blog

<title>線團</title>ip

</head>get

<body>

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

var context = canvas.getContext('2d');

function draw() {

context.beginPath();

for (i = 0; i < 2 * Math.PI; i = i + 0.01) {

var x = 200 + (80 * Math.cos(3 * i) + 40 * Math.cos(14* i));

var y = 150 + (80 * Math.sin(3 * i) + 40 * Math.sin(14* i));

if (i==0)

context.moveTo(x,y);

else

context.lineTo(x, y);

}

context.closePath();

context.lineWidth=2;

context.strokeStyle = "purple";

context.stroke();

}

draw();

</script>

</body>

</html>

將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出如圖1所示的線團圖案。

圖1 線團圖案

2．七彩線團

咱們能夠將線團圖案繪製過程進行動態展現，編寫HTML文件以下。

<!DOCTYPE>

<html>

<head>

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

var context = canvas.getContext('2d');

var i=0, t = 0;

var colors=new Array('red','orange','yellow','green','cyan','blue','purple');

function draw() {

var x = 200 + 90 * Math.cos(3 * i) + 45 * Math.cos(14 * i);

var y = 150 + 90 * Math.sin(3 * i) + 45 * Math.sin(14 * i);

i=i+0.01;

if (i>=2*Math.PI) {

context.clearRect(0,0,canvas.width,canvas.height);

i=0;

}

t = t + 1;

if (t > 6) t = 0;

context.beginPath();

context.arc(x, y, 3, 0, 2 * Math.PI);

context.fillStyle = colors[t];

context.fill();

}

window.setInterval('draw()', 20);

</script>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中看到七彩線團圖案的動態繪製過程，如圖2所示。

圖2 七彩線團圖案的動態繪製

相關標籤/搜索

每日一句

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