<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:2px solid blue;">
您的瀏覽器不支持。
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(100,100,30,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
</body>
</html>
顯示圖：
【畫圓，Math.PI 函數的應用。cxt.arc(100,100,30,0,Math.PI*2,true); 括號內第一個和第二個參數，代表圓心坐標。第三個參數是圓的半徑。第四個參數代表圓周起始位置。0 PI就是起始位置。沿順時針路線，分別是0.5 PI（正下方），1 PI和1.5 PI（正上方），為畫餅圖提供了扇形范圍的依據。 第五個參數是弧長Math.PI*2就是整個圓，Math.PI是半圓。第六個參數是一個布爾值，true是順時針false是順時針。】