<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用路径</title>
</head>
<body>
<canvas id="ourCanvas" width="400" height="400" style="border:3px dashed #0094ff;" ></canvas>
<script>
//arc(float x,float y,float radius,float startAngel,endAngel,booleancounterclockwise)counterclockwise逆时针
//向Canvas的当前路径添加一段弧。绘制以x、y为圆心的，radius为半径，从startAngel角度开始，到endAngel角度结束的圆弧。startAngel和endAngel以弧度作为单位。
var canvas = document.getElementById("ourCanvas");
var ctx = canvas.getContext("2d");
//开始定义路径
ctx.beginPath();
//添加一段圆弧
ctx.arc(166, 166, 90, 0,Math.PI*0.6, true);
//关闭路径
ctx.closePath();
//设置填充颜色
ctx.strokeStyle = "#f00";
//设置填充宽度
ctx.lineWidth = 10;
//填充当前路径
ctx.stroke();
</script>
</body>
</html>