canvas arc() 方法
arc() 方法创建弧/曲线（用于创建圆或部分圆），更多可参考《HTML 5 Canvas 绘制图形图像》
提示1：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。
提示2：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。stroke 方法用于绘制路径，fill 方法用于填充路径。
JavaScript 语法：context.arc(x,y,r,sAngle,eAngle,counterclockwise);
| 参数 | 描述 |
|---|---|
| x | 圆的中心的 x 坐标。 |
| y | 圆的中心的 y 坐标。 |
| r | 圆的半径。 |
| sAngle | 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。 |
| eAngle | 结束角，以弧度计。 |
| counterclockwise | 可选。规定应该逆时针还是顺时针绘图。False = 顺时针(默认)，true = 逆时针。 |
编码示例
绘制圆形
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>直线运动</title>
<style type="text/css">
.divContent {
display: inline-block;
width: 200px;
height: 200px;
background-color: #333333;
margin-left: 200px;
}
</style>
<!-- JQuery CDN-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="module">
/**画第一个圆形----非动画版
* */
let drawArc1 = function () {
/**获取画布*/
let canvas = document.getElementById("myCanvas");
/**
* 动态设置画布的宽、高。注意 Canvas 的 width、height的值只能是纯数字，不能带单位
* 如下所示，让画布填充父元素
* @type {void|string|XML|*|jQuery}
*/
canvas.width = $(".divContent").css("width").replace("px", "");
canvas.height = $(".divContent").css("height").replace("px", "");
/**获取画布上下文*/
let ctx = canvas.getContext("2d");
/**1)设置画笔颜色，不设置时默认为黑色
* strokeStyle 属性设置或返回画笔的颜色、渐变或模式*/
ctx.strokeStyle = "#fff";
/**2）开始一条新路径
* beginPath() 方法开始一条路径，或重置当前的路径*/
ctx.beginPath();
/**3）创建弧线/曲线
* 圆心的位置为画布的中心，圆形半径为 50 像素(不能带单位)
* 起始角度为 0，即 x 轴的正方向，结束角度为 360度*/
ctx.arc(canvas.width / 2, canvas.height / 2, 50, 0, 2 * Math.PI);
/**4）绘制定义好的路径
* stroke() 方法实际地绘制路径*/
ctx.stroke();
}
/**画第二个圆—————动画版
* eAngle：圆形结束的角度，会动态变化达到动画的效果
* canvas：画布，作为参数传入，避免每次重复获取
* ctx：画布上下文，作为参数传入，避免每次重复获取
*/
let eAngle = 0;
let drawArc2 = function (canvas, ctx) {
/**
* 动态设置画布的宽、高。注意 Canvas 的 width、height的值只能是纯数字，不能带单位
* 如下所示，让画布填充父元素
*
* 为画布设置宽(width)与高(height)，它会先清除整个画布内所有的旧像素
* 相当于调用 context.clearRect(0,0,canvas.width,canvas.height); 方法
* 如果每次需要重新渲染，则需要清除旧像素；如果是叠加绘图，则不需要清除旧像素
* */
canvas.width = $(".divContent").css("width").replace("px", "");
canvas.height = $(".divContent").css("height").replace("px", "");
/**1)设置画笔颜色，不设置时默认为黑色
* strokeStyle 属性设置或返回画笔的颜色、渐变或模式*/
ctx.strokeStyle = "#fff";
/**2）开始一条新路径
* beginPath() 方法开始一条路径，或重置当前的路径*/
ctx.beginPath();
/**3）创建弧线/曲线
* true 表示逆时针绘制，false 或者不写为顺时针*/
ctx.arc(canvas.width / 2, canvas.height / 2, 50, 0, eAngle, true);
/**4）绘制定义好的路径
* stroke() 方法实际地绘制路径*/
ctx.stroke();
/**
* 将结束角度 + 0.1，然后如果已经达到 360度，则归零
* 使用 requestAnimationFrame 实现帧动画，每秒约 60 次的循环回调 drawArc2 方法
* @type {number}
*/
eAngle = eAngle + 0.1;
if (eAngle >= 2 * Math.PI) {
eAngle = 0;
}
/**帧动画回调*/
requestAnimationFrame(function () {
drawArc2(canvas, ctx);
});
}
$(function () {
drawArc1();
/**获取画布*/
const canvas = document.getElementById("myCanvas2");
/**获取画布上下文*/
const ctx = canvas.getContext("2d");
drawArc2(canvas, ctx);
});
</script>
</head>
<body>
<div class="divContent">
<canvas id="myCanvas">
浏览器不支持 Canvas
</canvas>
</div>
<div class="divContent">
<canvas id="myCanvas2">
浏览器不支持 Canvas
</canvas>
</div>
</body>
</html>对 requestAnimationFrame 不熟悉的，可以查看《 requestAnimationFrame()方法实现帧动画》
填充圆形
区别在于：
strokeStyle 属性用于设置或返回画笔的颜色、渐变或模式
stroke() 绘制已定义的路径
fillStyle 属性用于设置或返回用于填充绘画的颜色、渐变或模式
fill() 属性用于填充当前绘图（路径）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>直线运动</title>
<style type="text/css">
.divContent {
display: inline-block;
width: 200px;
height: 200px;
background-color: #333333;
margin-left: 200px;
}
</style>
<!-- JQuery CDN-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="module">
/**画第一个圆形----非动画版
*/
let drawArc1 = function () {
/**获取画布*/
let canvas = document.getElementById("myCanvas");
/**
* 动态设置画布的宽、高。注意 Canvas 的 width、height的值只能是纯数字，不能带单位
* 如下所示，让画布填充父元素
* @type {void|string|XML|*|jQuery}
*/
canvas.width = $(".divContent").css("width").replace("px", "");
canvas.height = $(".divContent").css("height").replace("px", "");
/**获取画布上下文*/
let ctx = canvas.getContext("2d");
/**1)设置路径将要填充的颜色
* fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式*/
ctx.fillStyle = "#f00";
/**2）开始一条新路径
* beginPath() 方法开始一条路径，或重置当前的路径*/
ctx.beginPath();
/**3）创建弧线/曲线
* 圆心的位置为画布的中心，圆形半径为 50 像素(不能带单位)
* 起始角度为 0，即 x 轴的正方向，结束角度为 360度*/
ctx.arc(canvas.width / 2, canvas.height / 2, 50, 0, 2 * Math.PI);
/**4）绘制定义好的路径
* fill() 方法填充当前的图像（路径）,默认颜色是黑色。*/
ctx.fill();
}
/**画第二个圆—————动画版
* eAngle：圆形结束的角度，会动态变化达到动画的效果
* canvas：画布，作为参数传入，避免每次重复获取
* ctx：画布上下文，作为参数传入，避免每次重复获取
*/
let eAngle = 0;
let drawArc2 = function (canvas, ctx) {
/**
* 动态设置画布的宽、高。注意 Canvas 的 width、height的值只能是纯数字，不能带单位
* 如下所示，让画布填充父元素
*
* 为画布设置宽(width)与高(height)，它会先清除整个画布内所有的旧像素
* 相当于调用 context.clearRect(0,0,canvas.width,canvas.height); 方法
* 如果每次需要重新渲染，则需要清除旧像素；如果是叠加绘图，则不需要清除旧像素
* */
canvas.width = $(".divContent").css("width").replace("px", "");
canvas.height = $(".divContent").css("height").replace("px", "");
/**1)设置路径将要填充的颜色
* fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式*/
ctx.fillStyle = "#f00";
/**2）开始一条新路径
* beginPath() 方法开始一条路径，或重置当前的路径*/
ctx.beginPath();
/**3）创建弧线/曲线
* true 表示逆时针绘制，false 或者不写为顺时针*/
ctx.arc(canvas.width / 2, canvas.height / 2, 50, 0, eAngle, true);
/**4）绘制定义好的路径
* fill() 方法填充当前的图像（路径）,默认颜色是黑色。*/
ctx.fill();
/**
* 将结束角度 + 0.1，然后如果已经达到 360度，则归零
* 使用 requestAnimationFrame 实现帧动画，每秒约 60 次的循环回调 drawArc2 方法
* @type {number}
*/
eAngle = eAngle + 0.1;
if (eAngle >= 2 * Math.PI) {
eAngle = 0;
}
requestAnimationFrame(function () {
drawArc2(canvas, ctx);
});
}
$(function () {
drawArc1();
/**获取画布*/
const canvas = document.getElementById("myCanvas2");
/**获取画布上下文*/
const ctx = canvas.getContext("2d");
drawArc2(canvas, ctx);
});
</script>
</head>
<body>
<div class="divContent">
<canvas id="myCanvas">
浏览器不支持 Canvas
</canvas>
</div>
<div class="divContent">
<canvas id="myCanvas2">
浏览器不支持 Canvas
</canvas>
</div>
</body>
</html>