在HTML5的Canvas 2D API中，可以呼叫arc方法繪制圓或圓弧，該方法呼叫格式為：
context . arc(x, y, radius, startAngle, endAngle, anticlockwise)
其中：（x,y）為圓心坐標，radius為半徑，startAngle和endAngle給定圓弧的開始角度和結束角度，anticlockwise給定方向，為布爾型別，規定應該逆時針還是順時針繪圖，False = 順時針，true = 逆時針，
例如，撰寫如下的HTML檔案，
<!DOCTYPE html>
<html>
<head>
<title>笑臉</title>
<script type="text/javascript">
function draw(id)
{
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 onl oad="draw('myCanvas');">
<canvas id="myCanvas" width="300" height="200" style="border:3px double #996633;"></canvas>
</body>
</html>
將上述HTML代碼保存到一個html文本檔案中，再在瀏覽器中打開包含這段HTML代碼的html檔案，可以看到在瀏覽器視窗中繪制出笑臉圖案，如圖1所示，
圖1 笑臉圖案
再例如，撰寫如下的HTML檔案，
<!DOCTYPE html>
<head>
<script type="text/javascript">
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>
<body onl oad="draw('myCanvas');">
<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>
<script type="text/javascript">
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>
<body onl oad="draw('myCanvas');">
<canvas id="myCanvas" width="300" height="300">您的瀏覽器不支持canvas！
</canvas>
</body>
</html>
將上述HTML代碼保存到一個html文本檔案中，再在瀏覽器中打開包含這段HTML代碼的html檔案，可以看到在瀏覽器視窗中繪制出圓周上的圓圖案，如圖3所示，
圖3 圓周上的圓圖案
上面繪制的圓的顏色全部采用藍色，若顏色采用rgb函式計算，可以修改上述HTML檔案如下：
<!DOCTYPE html>
<head>
<title>圓周上的圓（二）</title>
<script type="text/javascript">
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>
<body onl oad="draw('myCanvas');">
<canvas id="myCanvas" width="300" height="300">您的瀏覽器不支持canvas！
</canvas>
</body>
</html>
在瀏覽器中打開包含這段HTML代碼的html檔案，可以看到在瀏覽器視窗中繪制出圓周上的圓圖案，如圖4所示，
圖4 圓周上的圓
2．圓的疊加
隨機選定40個圓心坐標，繪制50個半徑為40的圓，并用給定顏色進行填充，可撰寫的HTML代碼如下，
<html>
<head>
<title>圓的疊加</title>
<script type="text/javascript">
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>
<body onl oad="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="400" style="border:3px double #996633;">
</canvas>
</body>
</html>
在瀏覽器中打開包含這段HTML代碼的html檔案，可以看到在瀏覽器視窗中繪制出圓的疊加圖案，如圖5所示，
圖5 圓的疊加圖案
3．心臟形圖案
在半徑為60的圓周上選取28個圓心坐標，根據當前圓心坐標的橢圓公式計算出半徑，按計算的半徑分別繪制28個圓，可撰寫的HTML代碼如下，
<!DOCTYPE html>
<head>
<title>心臟形圖案</title>
<script type="text/javascript">
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>
<body onl oad="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="400">您的瀏覽器不支持canvas！
</canvas>
</body>
</html>
在瀏覽器中打開包含這段HTML代碼的html檔案，可以看到在瀏覽器視窗中繪制出心臟形圖案，如圖6所示，
圖6 心臟形圖案
4．腎形圖案
在半徑為80的圓周上選取28個圓心坐標，將當前圓心坐標與畫布中心位置的橫向距離作為半徑分別繪制28個圓，可撰寫的HTML代碼如下，
<!DOCTYPE html>
<head>
<title>腎形圖案</title>
<script type="text/javascript">
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>
<body onl oad="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="300">您的瀏覽器不支持canvas！
</canvas>
</body>
</html>
在瀏覽器中打開包含這段HTML代碼的html檔案，可以看到在瀏覽器視窗中繪制出腎形圖案，如圖7所示，
圖7 腎形圖案
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/17757.html
標籤：其他