／／ ／／ ／／http://www.365mini.com/diy.php?f=html5-canvas-circle-demo-1 ／／ 以下代码 在线运行＋本地支持
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas绘制弧线入门示例</title>
</head>
<body>
<!-- 添加canvas标签，并加上红色边框以便于在页面上查看 -->
<canvas id="myCanvas" width="50px" height="50px" style="border: 1px solid red;">
</canvas>
<script type="text/javascript">
<!-- 1 -->
var canvas = document.getElementById("myCanvas");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "blue";
var circle = { x : 10, y : 40, r : 10 };
ctx.arc(circle.x, circle.y, circle.r, -Math.PI*3/ 4, Math.PI / 2, false); ctx.stroke();
}
<!-- 2 -->
var canvas = document.getElementById("myCanvas");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "blue";
var circle = { x : 25, y : 26, r : 10 };ctx.arc(circle.x, circle.y, circle.r, -Math.PI/2, Math.PI/4, true); ctx.stroke();
}
<!-- 3-->
var canvas = document.getElementById("myCanvas");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "red";
var circle = { x : 30, y : 35, r : 10 };
ctx.arc(circle.x, circle.y, circle.r, -Math.PI*3/ 4, Math.PI / 2, false); ctx.stroke();
}
<!-- 4 -->
var canvas = document.getElementById("myCanvas");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "red";
var circle = { x :45, y : 23, r : 10 };ctx.arc(circle.x, circle.y, circle.r, -Math.PI/2, Math.PI/4, true); ctx.stroke();
}
</script>
</body>
</html>
原文地址：http://wzsts.blog.51cto.com/10251779/1783798
