话不多说,上代码!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<!--
绘制弧形有两种方法
arc(x, y, r, sAngle, eAngle, anticlockwise); 以(x, y)为圆心, r为半径,从sAngle 的弧度开始 到 eAngle的弧度结束,0 弧度是指的 x 轴正方向
anticlockwise的值为布尔值, false 表示顺时针,true表示逆时针
radians=(Math.PI/180)*degrees //角度转换成弧度
arcTo(x1, y1, x2, y2, radius): 根据给定的控制点和半径画一段圆弧,最后再以直线连接两个控制点。
stroke() 通过线条来绘制图形轮廓
fill() 通过填充路径的内容区域生成实心的图形
-->
<body>
<canvas id="can1" width="500" height="300"></canvas>
<script>
(() => {
let canvas = document.getElementById("can1")
let ctx = canvas.getContext("2d")
ctx.beginPath()
ctx.arc(50, 50, 40, 0, Math.PI / 2, false);
ctx.stroke();
ctx.beginPath()
ctx.arc(150, 50, 40, 0, -Math.PI / 2, true);
ctx.closePath()
ctx.stroke();
ctx.beginPath();
ctx.arc(50, 150, 40, -Math.PI / 2, Math.PI / 2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(150, 150, 40, 0, Math.PI, false);
ctx.fill();
})()
</script>
<canvas id="can2" width="500" height="300"></canvas>
<script>
(() => {
let canvas = document.getElementById("can2")
let ctx = canvas.getContext("2d")
ctx.beginPath();
ctx.moveTo(50, 50);
//参数1、2:控制点1坐标 参数3、4:控制点2坐标 参数5:圆弧半径
ctx.arcTo(200, 50, 200, 200, 100);
ctx.lineTo(200, 200)
ctx.stroke();
ctx.beginPath();
ctx.rect(50, 50, 10, 10);
ctx.rect(200, 50, 10, 10)
ctx.rect(200, 200, 10, 10)
ctx.fill()
})()
</script>
</body>
</html>