<body>
<!--畫板-->
// 當瀏覽器不支持的時候才會出現文字
<canvas id="canvas" style="background-color: black;">您當前的版本不支持 </canvas>
<script type="text/javascript">
// 拿到畫板
var canvas = document.getElementById('canvas');
canvas.width = 1000;
canvas.height = 1000;
// 拿到上下文
var context = canvas.getContext('2d');
// 設置線條的顏色
context.strokeStyle = 'red';
// 設置線條的寬度
context.lineWidth = 5;
// 繪制直線
context.beginPath();
// 起點
context.moveTo(200, 200);
// 終點
context.lineTo(500, 200);
context.closePath();
context.stroke();
// 繪制弧線
context.beginPath();
/*
* params
* 圓心x坐標
* 圓心y坐標
* 半徑
* 起始角度
* 結束角度
* 方向，true 逆時針 false 順時針 默認false，不寫表示false
*/
context.arc(200,200,100,0,Math.PI/2,false);
context.closePath();
context.stroke();
context.strokeStyle = 'red';
context.arc(200,200,100,0,Math.PI/2, true);
context.closePath();
context.stroke();
</script>
</body>
