JavaScript圖形實例：圓形圖案

時間 2019-12-22

原文原文鏈接

在HTML5的Canvas 2D API中，能夠調用arc方法繪製圓或圓弧。該方法調用格式爲：javascript

context . arc(x, y, radius, startAngle, endAngle, anticlockwise)html

其中：（x,y）爲圓心座標，radius爲半徑，startAngle和endAngle給定圓弧的開始角度和結束角度，anticlockwise給定方向，爲布爾類型，規定應該逆時針仍是順時針繪圖。False = 順時針，true = 逆時針。java

例如，編寫以下的HTML文件。canvas

<!DOCTYPE html>瀏覽器

<html>dom

<head>函數

<title>笑臉</title>3d

function draw(id)blog

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

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

context.beginPath();

context.arc(75,75,50,0,Math.PI*2,true); // 圓臉

context.moveTo(110,75);

context.arc(75,75,35,0,Math.PI,false); // 口(順時針)

context.moveTo(65,65);

context.arc(60,65,5,0,Math.PI*2,true); // 左眼

context.moveTo(95,65);

context.arc(90,65,5,0,Math.PI*2,true); // 右眼

context.stroke();

}

</script>

</head>

</body>

</html>

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

圖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,300);

context.lineWidth=2;

for (var i=1;i<10;i++)

{

context.beginPath();

context.arc(i*20,i*20,i*10,0,Math.PI*2,true);

context.strokeStyle = 'rgb('+(25*i)+','+(255-25*i)+',255)';

context.closePath();

context.stroke();

}

</script>

</head>

<canvas id="myCanvas" width="400" height="300">您的瀏覽器不支持canvas！

</canvas>

</body>

</html>

將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出9個圓形沿直線從小到大拋出的圖案，如圖2所示。

圖2 沿直線從小到大拋出的9個圓

1．圓周上的圓圖案

在半徑爲60的圓周上取36個點做爲圓心，繪製36個半徑爲60的圓。

可編寫以下的HTML代碼。

<!DOCTYPE html>

<head>

<title>圓周上的圓</title>

function draw(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

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

context.fillStyle="#EEEEDD";

context.fillRect(0,0,300,300);

context.strokeStyle="blue";

context.lineWidth=1;

var dig=Math.PI/18;

var radius=60;

context.beginPath();

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

{

var x=radius*Math.cos(i*dig)+150;

var y=radius*Math.sin(i*dig)+150;

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

}

context.closePath();

context.stroke();

}

</script>

</head>

<canvas id="myCanvas" width="300" height="300">您的瀏覽器不支持canvas！

</canvas>

</body>

</html>

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

圖3 圓周上的圓圖案

上面繪製的圓的顏色所有采用藍色，若顏色採用rgb函數計算，能夠修改上述HTML文件以下：

<!DOCTYPE html>

<head>

<title>圓周上的圓（二）</title>

function draw(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

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

context.fillStyle="#EEEEDD";

context.fillRect(0,0,300,300);

context.strokeStyle="blue";

context.lineWidth=1;

var dig=Math.PI/20;

var radius=70;

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

{

context.beginPath();

var x=radius*Math.cos(i*dig)+150;

var y=radius*Math.sin(i*dig)+150;

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

context.strokeStyle = 'rgb('+(6.25*i)+','+(255-6.25*i)+',255)';

context.closePath();

context.stroke();

}

</script>

</head>

<canvas id="myCanvas" width="300" height="300">您的瀏覽器不支持canvas！

</canvas>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出圓周上的圓圖案，如圖4所示。

圖4 圓周上的圓

2．圓的疊加

隨機選定40個圓心座標，繪製50個半徑爲40的圓，並用給定顏色進行填充。可編寫的HTML代碼以下。

<html>

<head>

function draw(id)

{

var canvas=document.getElementById(id);

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

context.globalCompositeOperation = "lighter";

context.fillStyle = "#ff6699";

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

{

context.beginPath();

context.arc(Math.random()*400,Math.random()*400, 40, 0,Math.PI*2);

context.closePath();

context.fill();

}

</script>

</head>

</canvas>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出圓的疊加圖案，如圖5所示。

圖5 圓的疊加圖案

3．心臟形圖案

在半徑爲60的圓周上選取28個圓心座標，根據當前圓心座標的橢圓公式計算出半徑，按計算的半徑分別繪製28個圓。可編寫的HTML代碼以下。

<!DOCTYPE html>

<head>

<title>心臟形圖案</title>

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.strokeStyle="red";

context.lineWidth=2;

var r1=60;

var y1=150-r1;

var PI=3.1415926;

context.beginPath();

for(a=0;a<2*PI;a+=PI/27)

{

x=200+r1*Math.cos(a);

y=150+r1*Math.sin(a);

rs=Math.sqrt((x-200)*(x-200)+(y-y1)*(y-y1));

context.beginPath();

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

context.closePath();

context.stroke();

}

</script>

</head>

<canvas id="myCanvas" width="400" height="400">您的瀏覽器不支持canvas！

</canvas>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出心髒形圖案，如圖6所示。

圖6 心臟形圖案

4．腎形圖案

在半徑爲80的圓周上選取28個圓心座標，將當前圓心座標與畫布中心位置的橫向距離做爲半徑分別繪製28個圓。可編寫的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,300);

context.strokeStyle="red";

context.lineWidth=2;

var r1=80;

var PI=3.1415926;

for(a=0;a<=2*PI;a+=PI/27)

{

x=200+r1*Math.cos(a);

y=150+r1*Math.sin(a);

rs=Math.abs(x-200);

context.beginPath();

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

context.closePath();

context.stroke();

}

</script>

</head>

<canvas id="myCanvas" width="400" height="300">您的瀏覽器不支持canvas！

</canvas>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出腎形圖案，如圖7所示。

圖7 腎形圖案

相關標籤/搜索

每日一句

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