版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_22520215/article/details/84893691
首先圆形也是路径，所以也需要开始和结束和填充
开始 结束 填充代码
context.beginPath();
<!-- 画圆函数-->
context.closePath();
context.fill();画圆函数
context.arc(x,y,radius,starAngle,endAngle,anticlockwise);
参数x,y表示圆心坐标；
参数startAngle表示起始角度，从x轴正向开始算起
参数endAngle表示结束角度，（角度采用弧度制，即360度=2*PI）
参数anticlockwise表示角度方向（以逆时针为true）下面绘制一个圆
代码如下：fill是填充，stroke是绘制路径；
<!DOCTYPE html> <!-- 告诉浏览器我们使用的HTML模板为HTML5 -->
<html lang="en"> <!-- 网页页面的根，其他元素均放在其中，只能有一个 -->
<head> <!--页面所有meta元素均包含在这里 -->
<meta charset="UTF-8"> <!-- 编码方式 -->
<title>Canves高速入门</title> <!-- 页面设置名称，显示在浏览器标题栏中 -->
<!-- CSS 及 javascript 代码放置处 -->
<script type="text/javascript" src="jquery-3.3.1.min.js"></script> <!-- 引用jQuery库-->
<script type="text/javascript">
$(document).ready(function(){
//alert("HELLO WORLD!!!")
var canvas = $("#mycanvas");
var context = canvas.get(0).getContext("2d");
context.beginPath();
context.arc(100,200,50,0,Math.PI,true);
context.closePath();
context.fill();
context.beginPath();
context.arc(200,200,40,0,Math.PI*2,true);
context.closePath();
context.stroke();
});
</script>
</head>
<body> <!-- 页面的主题内容均在这里 -->
<canvas width="500" height="500" id="mycanvas" style="background-color: #113344"></canvas>
</body>
</html>效果图：
改变颜色与前面矩形、线条一样，这里不做说明
改变宽度与前面矩形、线条一样，这里不做说明