<body>
<canvas id="test" width="800" height="300"></canvas>
<script type="text/javascript">
//一個工具函數，用於將角度從角度制轉化成弧度制
function rads(x){ return Math.PI*x/180;}
var canvas = document.getElementById('test');
var c = canvas.getContext("2d");
//繪制一個圖形，如果需要橢圓的話則進行相應的縮放和旋轉即可
//由於沒有當前點，因此繪制的圖形不需要當前點到圓形起點之間的直線
c.beginPath();
c.arc(75,100,50, //圓心位於（75,100），半徑為50
0,rads(360),false); //從0度到360順時針旋轉
//繪制一個楔，角度從x軸正向順時針度量
//要注意的是arc（）方法會將當前點和弧形起點用直線相連
c.moveTo(200,100); //從圓心開始
c.arc(200,100,50, //圓心和半徑
rads(-60),rads(0), //從-60度到0度
false); //順時針
c.closePath(); //將半徑添加到圓心
//同樣的楔，但方向不同
c.moveTo(325,100);
c.arc(325,100,50,
rads(-60),rads(0), //從-60度到0度
true); //逆時針
c.closePath();
//使用acrTo（）方法來繪制圓角，繪制一個一點（400,50）位左上角同時還帶有不同半徑角的正方形
c.moveTo(450,50); //從上邊的中點開始
c.arcTo(500,50,500,150,30); //添加部分上邊和右上角
c.arcTo(500,150,400,150,20); //添加右上角和右下角
c.arcTo(400,150,400,50,10); //添加底邊和坐下角
c.arcTo(400,50,500,50,0); //添加走遍左上角
c.closePath();
//二次貝塞爾曲線，一個控制點
c.moveTo(75,250); //從點（75,200）開始
c.quadraticCurveTo(100,200,175,250); //畫一條以一直到到點（175,250）結束的曲線
c.fillRect(100-3,200-3,6,6); //標記控制點（100,200）
//三次貝塞爾曲線
c.moveTo(200,250); //從點（200,250）開始
c.bezierCurveTo(220,220,280,280,300,250); //畫一條以一直到點（300,250）結束的曲線
c.fillRect(200-3,220-3,6,6); //標記控制點
c.fillRect(280-3,280-3,6,6);
//定義一些圖形屬性並繪制曲線
c.fillStyle="#aaa";
c.lineWidth = 5;
c.fill();
</script>
</body>
