JavaScript圖形實例：布紋圖案

時間 2019-12-19

標籤 javascript 圖形實例布紋圖案欄目 JavaScript 简体版

原文原文鏈接

1．橢圓型布紋圖案

先在HTML頁面中設置一個畫布。html

<canvas id="myCanvas" width="300" height="300" style="border:3px double #996633;">canvas

</canvas>瀏覽器

再在定義的這塊300*300的canvas（畫布）上面用二重循環繪製布紋圖案，繪製時，對每一個像素點經過橢圓方程求值的方式決定該點的顏色。3d

可編寫以下的HTML代碼。htm

<!DOCTYPE html>blog

<html>ip

<head>get

<title>橢圓型布紋圖案</title>it

</head>循環

<body>

</canvas>

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

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

var colors = [ "red","orange", "yellow","green", "blue"];

for (x=0;x<=300;x++)

for (y=0;y<=300;y++){

context.fillText('.',x,y);

c=Math.floor((x-150)*(x-150)/25+(y-150)*(y-150)/36)%5;

context.fillStyle=colors[c];

}

</script>

</body>

</html>

其中，採用的橢圓方程爲：

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

圖1 橢圓型布紋圖案

2．雙曲線型布紋圖案

將前面的橢圓方程改寫爲雙曲線方程，可從新編寫的HTML代碼以下。

<!DOCTYPE html>

<html>

<head>

<title>雙曲線型布紋圖案</title>

</head>

<body>

</canvas>

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

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

var colors = [ "red","orange", "yellow","green", "blue"];

for (x=0;x<=300;x++)

for (y=0;y<=300;y++){

context.fillText('.',x,y);

c=Math.abs(Math.floor((x-150)*(x-150)/25-(y-150)*(y-150)/36))%5;

context.fillStyle=colors[c];

}

</script>

</body>

</html>

其中，採用的雙曲線方程爲：

在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出精美的雙曲線型布紋圖案，如圖4所示。

圖4 雙曲線型布紋圖案

相關標籤/搜索

每日一句

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