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>

页面效果

相关推荐
空白诗3 小时前
HTML 基础概念:什么是 HTML ? HTML 的构成 与 HTML 基本文档结构
前端·html
小白讲前端11 小时前
HTML+CSS太极效果(附源码!!!)
前端·css·html
@动感superman13 小时前
CSS基础知识六(浮动的高度塌陷问题及解决方案)
前端·css·html·css3·html5
owerm13 小时前
vue2和vue3在html中引用组件component方式不一样
前端·vue.js·html
追自己20 小时前
黑马官网2024最新前端就业课V8.5笔记---HTML篇
前端·笔记·html
咔咔咔卡里。20 小时前
第八章 利用CSS制作导航菜单课后习题
前端·css·html
前端与小赵1 天前
HTML和CSS 介绍
前端·css·html
Easonmax1 天前
【HTML5】html5开篇基础(6)
前端·html·html5