生成扇形
使用clip-path
- 圆形父元素作为底层
- 使用clip-path,绘制一个三角形或者多边形作为第二层
- 二者堆叠形成一个扇形
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
.outer {
width: 100px;
height: 100px;
background-color: gold;
margin: 200px auto;
border-radius: 50%;
/* overflow: hidden; */
}
.inner {
height: 50px;
width: 50px;
background-color: #407fff;
/* clip-path: polygon(0 0, 100% 100%, 0 100%); */
clip-path: polygon(0 0, 100% 100%, 0 100%);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
页面效果:
去掉父元素的背景色,设置overflow,就完成了一个扇形的绘制:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
.outer {
width: 100px;
height: 100px;
background-color: #fff;
margin: 200px auto;
border-radius: 50%;
overflow: hidden;
}
.inner {
height: 50px;
width: 50px;
background-color: #407fff;
clip-path: polygon(0 0, 100% 100%, 0 100%);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
完成45度的扇形绘制 如果需要其他角度的扇形,就在圆的基础上堆叠其他的多边形
使用canvas
canvas用来画图功能更加强大,使用arc()可以生成任意角度的扇形 arc(x, y, radius, startAngle, endAngle, antiClockwise)
- x, y,坐标
- radius半径
- startAngle/endAngle,开始和结束的坐标,单位是弧度
- antiClockWise,false为顺时针,true为逆时针
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
canvas {
border: 1px solid #000;
display: block;
margin: 200px auto;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script>
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(150, 150);
ctx.arc(150, 150, 50, 0, Math.PI / 3, false);
ctx.fillStyle = "#407fff";
ctx.fill();
</script>
</body>
</html>
页面效果