1.自己用canvas繪制的一個丑丑的扇形（兩個圓弧+一個梯形）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
canvas{background:#333333;}
</style>
</head>
<body>
<canvas id="acanvas" width="500" height="500">
您的瀏覽器不支持html5的canvas元素
</canvas>
<script type="text/javascript">
var canvas=document.getElementById('acanvas');
var p=canvas.getContext('2d');
p.lineWidth=2;
p.strokeStyle="yellow";
p.fillStyle="yellow";
p.moveTo(100,250);
p.lineTo(400,250);
p.lineTo(350,300);
p.lineTo(150,300);
p.fill();
p.stroke()
p.beginPath();
p.arc(250,510,301,Math.PI*4/3,Math.PI*5/3);
p.fill();
p.beginPath();
p.fillStyle="#333333";
p.arc(250,475,201,Math.PI*4/3,Math.PI*5/3);
p.fill();
</script>
</body>
</html>
2.從視頻中學習的canvas繪畫扇形(兩個扇形組合成一個扇子的模樣)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
canvas{background:#A9A9A0;}
</style>
</head>
<body>
<canvas id="bcanvas" width="800" height="800">
您的瀏覽器暫不支持HTML5的canvas元素
</canvas>
<script type="text/javascript">
var canvas=document.getElementById('bcanvas');
var pi=canvas.getContext('2d');
pi.lineWidth=2;
pi.strokeStyle="yellow";
pi.fillStyle="orange";
pi.moveTo(400,500);
pi.arc(400,500,300,Math.PI*7/6,Math.PI*11/6,false);
pi.closePath();
pi.fill();
pi.beginPath();
pi.strokeStyle="orange";
pi.fillStyle="#A9A9A0";
pi.moveTo(400,500);
pi.arc(400,500,150,Math.PI*7/6,Math.PI*11/6,false);
pi.closePath();
pi.fill();
</script>
</body>
</html>