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>

页面效果

相关推荐
小白64021 小时前
前端梳理体系从常问问题去完善-框架篇(react生态)
前端·css·html·reactjs
又是忙碌的一天13 小时前
前端学习day01
前端·学习·html
不会算法的小灰13 小时前
HTML简单入门—— 基础标签与路径解析
前端·算法·html
cooldream200914 小时前
深度解析中秋节HTML5动画的实现
前端·html·html5
我登哥MVP17 小时前
HTML-CSS-JS-入门学习笔记
javascript·css·笔记·学习·html
水冗水孚1 天前
React中使用map+area标签实现img图片特定区域标记功能(可用Photoshop精准拾取对应点位)
react.js·html·photoshop
前端 贾公子1 天前
《Vuejs设计与实现》第 18 章(同构渲染)(下)
前端·javascript·html
Never_Satisfied1 天前
在JavaScript / HTML中,词内断行
开发语言·javascript·html
whltaoin2 天前
中秋赏月互动页面:用前端技术演绎传统节日之美
前端·javascript·html·css3·中秋主题前端
qq_402605652 天前
python爬虫(一) ---- 静态html数据抓取
爬虫·python·html