<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用路径</title>
</head>
<body>
<canvas id="ourCanvas" width="450" height="450" style="border:3px dashed #000;" ></canvas>
<script>
//arc(float x,float y,float radius,float startAngel,endAngel,booleancounterclockwise)counterclockwise逆时针
//向Canvas的当前路径添加一段弧。绘制以x、y为圆心的，radius为半径，从startAngel角度开始，到endAngel角度结束的圆弧。startAngel和endAngel以弧度作为单位。
//true表示逆时针，false表示顺时针
var canvas = document.getElementById("ourCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(120, 120,100, 0,120, true);
ctx.closePath();
ctx.strokeStyle = "#f00";
ctx.lineWidth = 20;
ctx.shadowBlur =15;
ctx.shadowColor = "#ff0";
ctx.shadowOffsetX = 7;
ctx.shadowOffsetY = 7;
ctx.stroke();
//for (var i = 0; i < 10; i++) {
// ctx.beginPath();
// ctx.arc(i * 33, i * 33, (i + 1) * 10, 0, Math.PI * 2, true);
// ctx.closePath();
// ctx.fillStyle = 'rgba(155,201,93,' + (10 - i) * 0.1 + ')';
// ctx.fill();
//}
</script>
</body>
</html>