1.在HTML5文档中添加canvas元素，并且设置宽高和ID
2.在canvas元素中添加提示语句
3.添加script元素
4.获取画布/设置绘图环境
5.指定线宽：lineWidth=数值
6.指定颜色：fill/strokeStyle=颜色值（只适用用轮廓、线段等填充色用：fillStyle=颜色值）
7.设置圆的基本参数
arc(x,y,r,起始弧度，终止弧度，true/false)：创建圆弧/曲线（用于创建圆形或部分圆）
圆心的坐标：x,y
圆的半径：数值
起始弧度和终止弧度：角度值1，角度值2
绘制方向：true（逆时针）/false （顺时针）默认
8.开始绘制：stroke()/fill()
绘制半圆
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>canvas绘制圆</title>
</head>
<body>
<canvas id="mycanvas4" width="500" height="500">
</canvas>
<script type="text/javascript">
var canvas4=document.getElementById('mycanvas4');
var c4=canvas4.getContext('2d');
c4.lineWidth=8;
c4.strokeStyle="green";
c4.fillStyle="red";
c4.beginPath();
c4.strokeRect(100,100,50,100);
c4.strokeRect(400,100,50,100);
c4.beginPath();
c4.arc(275,300,50,0,Math.PI,false);
c4.stroke();
c4.beginPath();
c4.arc(275,300,50,0,Math.PI,false);
c4.fill();
</script>
</body>
</html>
绘制圆弧
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>canvas绘制圆</title>
</head>
<body>
<canvas id="mycanvas" width="500" height="500">
您浏览器暂不支持HTML5的canvas元素
</canvas>
<script type="text/javascript">
var canvas=document.getElementById('mycanvas');
var c=canvas.getContext('2d');
c.lineWidth=8;
c.strokeStyle="green";
c.fillStyle="red";
c.arc(100,50,30,0,Math.PI*2);
c.stroke();
c.beginPath();
c.arc(100,150,30,0,Math.PI*2);
c.fill();
c.beginPath();
c.arc(100,250,30,0,Math.PI*2);
c.fill();
c.stroke();
c.beginPath();
c.arc(300,50,30,0,Math.PI/3,true);
c.stroke();
c.beginPath();
c.arc(300,150,30,0,Math.PI/3,true);
c.fill();
c.beginPath();
c.arc(300,250,30,0,Math.PI/3,true);
c.fill();
c.stroke();
</script>
</body>
</html>
closePath()从终点连结起点
all
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>canvas绘制圆</title>
</head>
<body>
<canvas id="mycanvas" width="700" height="500">
您浏览器暂不支持HTML5的canvas元素
</canvas>
<script type="text/javascript">
var canvas=document.getElementById('mycanvas');
var c=canvas.getContext('2d');
c.lineWidth=8;
c.strokeStyle="green";
c.fillStyle="red";
c.arc(100,50,30,0,Math.PI*2);
c.stroke();
c.beginPath();
c.arc(100,150,30,0,Math.PI*2);
c.fill();
c.beginPath();
c.arc(100,250,30,0,Math.PI*2);
c.fill();
c.stroke();
c.beginPath();
c.arc(300,50,30,0,Math.PI/3,true);
c.stroke();
c.beginPath();
c.arc(300,150,30,0,Math.PI/3,true);
c.fill();
c.beginPath();
c.arc(300,250,30,0,Math.PI/3,true);
c.fill();
c.stroke();
c.beginPath();
c.lineWidth=2;
c.arc(500,50,30,0,Math.PI/3,true);
c.closePath();
c.stroke();
c.beginPath();
c.lineWidth=2;
c.arc(500,150,30,0,Math.PI/3,true);
c.closePath();
c.fill();
c.beginPath();
c.lineWidth=2;
c.arc(500,250,30,0,Math.PI/3,true);
c.closePath();
c.fill();
c.stroke();
</script>
</body>
</html>