绘制一条弧线
context.arc(
centerx,centery,radius,
startingAngle,endingAngle,
anticlockwise = false//顺时针默认 true逆时针
)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;">
</canvas>
</body>
</html>
<script type="text/javascript">
/*context.arc(
centerx,centery,radius,
startingAngle,endingAngle,
anticlockwise = false//顺时针默认 true逆时针
)*/
window.onload = function(){
var canvas = document.getElementById('canvas');
canvas.width = 1024;
canvas.height = 768;
var context = canvas.getContext('2d');
context.lineWidth = 5;
context.strokeStyle = '#005588';
for (var i = 0; i < 10; i++) {
context.beginPath();
context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
context.closePath();
context.stroke();
}
for (var i = 0; i < 10; i++) {
context.beginPath();
context.arc(50+i*100,180,40,0,2*Math.PI*(i+1)/10);
context.stroke();
}
}
</script>