html画简单图形

生成扇形

使用clip-path

  1. 圆形父元素作为底层
  2. 使用clip-path,绘制一个三角形或者多边形作为第二层
  3. 二者堆叠形成一个扇形
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>

页面效果

相关推荐
一梦浮华9 小时前
自学嵌入式 day37 HTML
前端·html
前端老鹰10 小时前
HTML <dialog> 元素:原生弹窗解决方案,无需再写复杂遮罩
前端·html
Caster_Z11 小时前
Java把word转HTML格式
java·html·word
低代码布道师14 小时前
HTML5 `<figure>` 标签:提升网页语义化与可访问性的利器
前端·html·html5
Hilaku15 小时前
Cookie Store API:用Promise的方式,告别手写document.cookie
前端·javascript·html
小楓120117 小时前
0基礎網站開發技術教學(一) --(前端篇)--
前端·javascript·css·html·web開發
有事没事实验室1 天前
node.js中的path模块
前端·css·node.js·html·html5
Hilaku1 天前
原生<dialog>元素:别再自己手写Modal弹窗了!
前端·javascript·html
zc-code1 天前
HTTP性能优化实战:从协议到工具的全面加速指南
网络·网络协议·http·缓存·性能优化·html
超浪的晨2 天前
JavaWeb 入门:HTML 基础与实战详解(Java 开发者视角)
java·开发语言·前端·后端·html·个人开发