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>

页面效果

相关推荐
葡萄城技术团队1 天前
所有网站通用:6 行 HTML 代码搞定页面加载提速
html
糖糖TANG1 天前
从零开始制作我的第一个静态网页——教师节主题首页开发记录
html
前端老鹰2 天前
HTML <output> 标签:原生表单结果展示容器,自动关联输入值
前端·html
芦苇Z2 天前
HTML <a> 标签的 rel 属性全解析:安全、隐私与 SEO 最佳实践
前端·html
Alice-YUE2 天前
【CSS学习笔记3】css特性
前端·css·笔记·html
破无差3 天前
《赛事报名系统小程序》
小程序·html·uniapp
从零开始学习人工智能3 天前
快速搭建B/S架构HTML演示页:从工具选择到实战落地
前端·架构·html
yddddddy3 天前
html基本知识
前端·html
小白64023 天前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·css·html
蓝胖子的多啦A梦4 天前
【前端】VUE+Element UI项目 页面自适应横屏、竖屏、大屏、PDA及手机等适配方案
前端·javascript·elementui·html·前端页面适配