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>

页面效果

相关推荐
焚 城2 小时前
EXCEL(带图)转html【uni版】
前端·html·excel
敲敲了个代码4 小时前
[特殊字符] Web 字体裁剪优化实践:把 42MB 字体包瘦到 1.6MB
前端·javascript·学习·html·web
San3010 小时前
CSS3 星球大战:用前端技术打造震撼的3D动画效果
前端·css·html
inx17710 小时前
用 HTML5 + CSS3 打造“星球大战”片头:一场视觉与代码的原力觉醒
css·html
李少兄21 小时前
HTML 表单控件
前端·microsoft·html
有点笨的蛋1 天前
HTML5 敲击乐:从静态页面到动态交互的前端实战
前端·html
UIUV1 天前
《CSS3 星球大战》页面实现笔记:用代码演绎银河史诗
css·html
BBB努力学习程序设计1 天前
CSS复合选择器
前端·html
不坑老师1 天前
macOS、Linux上的WPS终于有不坑盒子了,安装很简单,一行命令完成!
vue.js·html
Good kid.1 天前
一键部署 Deepseek网页聊天系统(基于 Spring Boot + HTML 的本地对话系统)
spring boot·后端·html