canvas绘图

最新推荐文章于 2024-08-11 02:49:42 发布

qianmingmaoyao

最新推荐文章于 2024-08-11 02:49:42 发布

阅读量149

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qianmingmaoyao/article/details/126589691

版权

1.canvas元素

    <style>
        canvas {
            border: 1px solid red;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <canvas></canvas>
    <canvas width="500px" height="500px"></canvas>
    总结:
        1.默认宽和高 300*150
        2.不能使用css设置宽和高
        3.如果重新设置宽和高,canvas内容将全部擦除
        4.canvas是行内块元素

2.绘制直线

   <style>
        canvas {
            border: 1px solid red;
        }
    </style>    
   <canvas width="600px" height="600px">
        浏览器不支持请升级
    </canvas>
    <script>
        // 1.获取DOM元素(画布)
        // 创建获取上下文(笔)
        var canvasEle = document.querySelector('canvas');
        var cxt = canvasEle.getContext('2d');
        // 2.绘制开始路径
        cxt.beginPath();
        // 3.绘制起点
        cxt.moveTo(50, 50);
        // 4.绘制直线
        cxt.lineTo(100, 200);
        // 5.闭合路径
        cxt.closePath();
        // 6.绘制-描边
        cxt.stroke();
    </script>

3.-绘制彩色的线

   <style>
        canvas {
            border: 1px solid red;
        }
    </style>    
    <canvas width="600px" height="600px">
        浏览器不支持请升级
    </canvas>
    <script>
        // 1.获取DOM元素(画布)
        // 创建获取上下文(笔)
        var canvasEle = document.querySelector('canvas');
        var cxt = canvasEle.getContext('2d');
        // 2.绘制开始路径
        cxt.beginPath();
        // 3.绘制起点
        cxt.moveTo(50, 50);
        // 4.绘制直线
        cxt.lineTo(100, 200);
        // 5.闭合路径
        cxt.closePath();
        // 添加画笔的颜色及粗细
        cxt.strokeStyle = 'skyblue';
        // 不加px
        cxt.lineWidth = '20';
        // 6.绘制-描边
        cxt.stroke();
    </script>

04-绘制三角形

    <style>
        canvas {
            border: 1px solid red;
        }
    </style>
    <canvas width="600px" height="600px">
        浏览器不支持请升级
    </canvas>
    <script>
        // 1.获取DOM元素(画布)
        // 创建获取上下文(笔)
        var canvasEle = document.querySelector('canvas');
        var cxt = canvasEle.getContext('2d');
        // 2.绘制开始路径
        cxt.beginPath();
        // 3.绘制起点
        cxt.moveTo(50, 50);
        // 4.绘制直线
        cxt.lineTo(200, 80);
        cxt.lineTo(100, 120);
        // 5.闭合路径
        cxt.closePath();
        // 6.绘制-描边
        cxt.stroke();
    </script>

05-绘制四边形

<style>
        canvas {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <canvas width="600px" height="600px">
        浏览器不支持请升级
    </canvas>
    <script>
        // 1.获取DOM元素(画布)
        // 创建获取上下文(笔)
        var canvasEle = document.querySelector('canvas');
        var cxt = canvasEle.getContext('2d');
        // 2.绘制开始路径
        cxt.beginPath();
        // 3.绘制起点
        cxt.moveTo(50, 50);
        // 4.绘制直线
        cxt.lineTo(200, 50);
        cxt.lineTo(200, 120);
        cxt.lineTo(50, 120);
        // 5.闭合路径
        cxt.closePath();
        // 6.绘制-描边
        cxt.stroke();
    </script>

06-绘制彩色图形

 <style>
        canvas {
            border: 1px solid red;
        }
        
        .box {
            width: 100px;
            height: 100px;
            border: 20px solid red;
        }
    </style>
</head>

<body>
    <canvas width="600px" height="300px">
        浏览器不支持请升级
    </canvas>
    <div class="box"></div>
    <script>
        // 1.获取DOM元素(画布)
        // 创建获取上下文(笔)
        var canvasEle = document.querySelector('canvas');
        var cxt = canvasEle.getContext('2d');
        // 2.绘制开始路径
        cxt.beginPath();
        // 3.绘制起点
        cxt.moveTo(50, 50);
        // 4.绘制直线
        cxt.lineTo(200, 50);
        cxt.lineTo(200, 120);
        cxt.lineTo(50, 120);
        // 画笔的颜色
        cxt.strokeStyle = 'red';
        cxt.lineWidth = '20';
        // 5.闭合路径
        cxt.closePath();
        // 6.绘制-描边
        cxt.stroke();

        // 填充的颜色--建议放置最后---画笔会覆盖一半
        cxt.fillStyle = 'purple';
        cxt.fill();
    </script>

07-快速绘制矩形

<style>
        canvas {
            border: 1px solid blue;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <canvas width="600px" height="300px"></canvas>
    <script>
        // 1.获取元素
        var canvasEle = document.querySelector('canvas');
        // 获取上下文
        var cxt = canvasEle.getContext('2d');
        // 2.绘制矩形
        cxt.rect(50, 50, 200, 100);
        // 画笔的颜色
        cxt.strokeStyle = 'blue';
        // 描边
        cxt.stroke();
        // 填充
        cxt.fillStyle = 'red';
        cxt.fill();
    </script>

08-快速绘制描边矩形

   <style>
        canvas {
            border: 1px solid blue;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <canvas width="600px" height="300px"></canvas>
    <script>
        // 1.获取元素
        var canvasEle = document.querySelector('canvas');
        // 获取上下文
        var cxt = canvasEle.getContext('2d');
        // 画笔的颜色
        cxt.strokeStyle = 'blue';
        // 2.绘制矩形
        cxt.strokeRect(50, 50, 200, 100);
    </script>
</body>

09-快速绘制填充矩形

    <style>
        canvas {
            border: 1px solid blue;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <canvas width="600px" height="300px"></canvas>
    <script>
        // 1.获取元素
        var canvasEle = document.querySelector('canvas');
        // 获取上下文
        var cxt = canvasEle.getContext('2d');
        // 设置填充的颜色
        cxt.fillStyle = 'red';
        // 2.绘制矩形
        cxt.fillRect(50, 50, 200, 100);
    </script>

10-绘制清除矩形

<style>
        canvas {
            border: 1px solid blue;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <canvas width="600px" height="300px"></canvas>
    <script>
        // 1.获取元素
        var canvasEle = document.querySelector('canvas');
        // 获取上下文
        var cxt = canvasEle.getContext('2d');
        // 设置填充的颜色
        cxt.fillStyle = 'red';
        // 2.绘制矩形
        cxt.fillRect(50, 50, 200, 200);
        // 清除矩形,相当于橡皮擦
        cxt.clearRect(100, 100, 50, 50);
    </script>
</body>

11-绘制圆弧

 <style>
        canvas {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <canvas width="600px" height="600px">
        浏览器不支持请升级
    </canvas>
    <script>
        // 1.获取DOM元素(画布)
        // 创建获取上下文(笔)
        var canvasEle = document.querySelector('canvas');
        var cxt = canvasEle.getContext('2d');
        // 2.绘制开始路径
        cxt.beginPath();
        // 绘制圆弧
        // 圆心的坐标
        var x0 = 200;
        var y0 = 200;
        var r = 60;

        // 弧度转角度公式rad = deg*Math.PI/180
        var start = 45 * Math.PI / 180;
        var end = 120 * Math.PI / 180;
        cxt.arc(x0, y0, r, start, end);

        // 5.闭合路径
        cxt.closePath();
        // 6.绘制-描边
        cxt.stroke();
    </script>
</body>

12-绘制扇形-四分之一圆

  <style>
        canvas {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <canvas width="600px" height="600px">
        浏览器不支持请升级
    </canvas>
    <script>
        // 1.获取DOM元素(画布)
        // 创建获取上下文(笔)
        var canvasEle = document.querySelector('canvas');
        var cxt = canvasEle.getContext('2d');
        // 2.绘制开始路径
        cxt.beginPath();
        // 绘制起点(圆心的坐标)
        cxt.moveTo(300, 300);
        // 绘制圆弧
        // 圆心的坐标
        var x0 = 300;
        var y0 = 300;
        var r = 60;

        // 弧度转角度公式rad = deg*Math.PI/180
        // var start = 0 * Math.PI / 180;
        // var end = 90 * Math.PI / 180;
        // cxt.arc(x0, y0, r, start, end);

        var start = 0 * Math.PI / 180;
        var end = 270 * Math.PI / 180;
        // 默认是顺时针,false,true:逆时针
        cxt.arc(x0, y0, r, start, end, true);

        // 5.闭合路径
        cxt.closePath();
        // 6.绘制-描边
        cxt.stroke();
    </script>

13-绘制饼图

  <style>
        canvas {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <canvas width="800px" height="800px">
        浏览器不支持请升级
    </canvas>
    <script>
        // 1.获取DOM元素(画布)
        // 创建获取上下文(笔)
        var canvasEle = document.querySelector('canvas');
        var cxt = canvasEle.getContext('2d');
        var data = [{
            msg: '8000以下',
            value: 0.1,
            color: 'grey'
        }, {
            msg: '8000-9000',
            value: 0.2,
            color: 'yellow'
        }, {
            msg: '9000-10000',
            value: 0.2,
            color: 'green'
        }, {
            msg: '10000以上',
            value: 0.5,
            color: 'blue'
        }];

        var x0 = 400;
        var y0 = 400;
        var r = 200;
        // 设置初始的开始角度
        var startDeg = 0;
        var endDeg = 0;
        var zhuanhu = Math.PI / 180;
        // 设置初始的结束角度
        for (var i = 0; i < data.length; i++) {
            // 1. 绘制起点路径
            cxt.beginPath();
            // 2.绘制原心坐标
            cxt.moveTo(x0, y0);
            // 3.求出每个模块占据的度数
            var targetDeg = data[i].value * 360;
            // 4.结束的度数
            var endDeg = startDeg + targetDeg;
            cxt.arc(x0, y0, r, startDeg * zhuanhu, endDeg * zhuanhu);
            // 5.闭合路径
            cxt.closePath();
            // 6.绘制-描边
            cxt.stroke();
            cxt.fillStyle = data[i].color;
            cxt.fill();
            // 为下一次绘制做准备
            startDeg = endDeg;
        };
        pack
        // 1. 绘制起点路径
        cxt.beginPath();
        cxt.moveTo(600, 400);
        // X坐标 = x0 + Math.cos(rad) * r; //x0和y0是圆心点坐标,r是半径

        // Y坐标 = y0 + Math.sin(rad) * r; //注意都是弧度 
        var x = x0 + Math.cos(data[0].value * 360 * zhuanhu) * r;
        var y = y0 + Math.sin(data[0].value * 360 * zhuanhu) * r;
        cxt.lineTo(x, y);
        // 闭合路径
        cxt.closePath();
        js
        cxt.stroke();
    </script>

14-绘制文本

 <style>
        canvas {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <canvas width="600px" height="600px">
        浏览器不支持请升级
    </canvas>
    <script>
        // 1.获取DOM元素(画布)
        // 创建获取上下文(笔)
        var canvasEle = document.querySelector('canvas');
        var cxt = canvasEle.getContext('2d');
        cxt.font = '66px 宋体';
        // cxt.textAlign = 'center';
        // 实心文字
        // cxt.fillText('贾顺辉怎么这么帅', 50, 100);
        cxt.strokeStyle = 'blue';
        // 空心文字
        // cxt.strokeText('贾顺辉怎么这么帅', 50, 100);
        cxt.strokeText('贾顺辉怎么这么帅', 50, 100, 80);
    </script>

15-绘制图片到canvas上1

  <style>
        canvas {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <canvas width="600px" height="600px">
        浏览器不支持请升级
    </canvas>
    <img src="images/liu.jpg" alt="" width="200" class="imgEle">
    <script>
        // 1.获取DOM元素(画布)
        // 创建获取上下文(笔)
        var canvasEle = document.querySelector('canvas');
        var cxt = canvasEle.getContext('2d');
        var imgEle = document.querySelector('.imgEle');
        // 图片的加载时间,比代码执行要慢,所以等图片加载完成时,再进行绘制
        imgEle.onload = function() {
            // cxt.drawImage(imgEle, 10, 10);
            // cxt.drawImage(imgEle, 10, 10, 200, 300);
            // context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
            cxt.drawImage(imgEle, 300, 300, 600, 600, 10, 10, 300, 300);
        };
    </script>

16-绘制图片到canvas上2-创建img元素

<style>
        canvas {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <canvas width="600px" height="600px">
        浏览器不支持请升级
    </canvas>
    <script>
        // 1.获取DOM元素(画布)
        // 创建获取上下文(笔)
        var canvasEle = document.querySelector('canvas');
        var cxt = canvasEle.getContext('2d');
        var imgEle = document.createElement('img');
        imgEle.src = 'images/liu.jpg';
        // 图片的加载时间,比代码执行要慢,所以等图片加载完成时,再进行绘制
        imgEle.onload = function() {
            cxt.drawImage(imgEle, 300, 300, 600, 600, 10, 10, 300, 300);
        };
    </script>

17-绘制图片到canvas上3-构造函数创建

 <style>
        canvas {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <canvas width="600px" height="600px">
        浏览器不支持请升级
    </canvas>
    <script>
        // 1.获取DOM元素(画布)
        // 创建获取上下文(笔)
        var canvasEle = document.querySelector('canvas');
        var cxt = canvasEle.getContext('2d');
        var imgEle = new Image();
        imgEle.src = 'images/liu.jpg';
        // 图片的加载时间,比代码执行要慢,所以等图片加载完成时,再进行绘制
        imgEle.onload = function() {
            cxt.drawImage(imgEle, 300, 300, 600, 600, 10, 10, 300, 300);
        };
    </script>

18-绘制水印

 <style>
        canvas {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <canvas width="800px" height="800px">
        浏览器不支持请升级
    </canvas>
    <script>
        // 1.获取DOM元素(画布)
        // 创建获取上下文(笔)
        var canvasEle = document.querySelector('canvas');
        var cxt = canvasEle.getContext('2d');
        // 创建图片对象
        var imgEle = new Image();
        imgEle.src = 'images/zhangyi.png';
        // 绑定onload
        imgEle.onload = function() {
            cxt.drawImage(imgEle, 50, 50);
            cxt.fillStyle = '#fff';
            cxt.font = '700 30px 楷体';
            cxt.fillText('版权归huohua222', 400, 700);
        }
    </script>

19-绘制海报

 <style>
        canvas {
            border: 1px solid red;
        }
        
        button {
            border: 0;
            width: 80px;
            height: 50px;
            background-color: #fc035f;
            color: #fff;
            font-size: 21px;
            display: block;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <canvas></canvas>
    <button>下载</button>
    <script>
        // 获取元素
        var canvasEle = document.querySelector('canvas');
        // 使用属性修改宽和高
        canvasEle.width = "300";
        canvasEle.height = "500";
        var cxt = canvasEle.getContext('2d');
        // 1.绘制背景图片
        var img = new Image();
        img.src = 'images/beijing1.jpg';
        img.onload = function() {
            // 背景渲染
            cxt.drawImage(img, 0, 0);
            cxt.fillStyle = '#fff';
            cxt.fillRect(30, 220, 240, 240);
            // 绘制头像
            var imgHead = new Image();
            imgHead.src = 'images/tou.png';
            imgHead.onload = function() {
                cxt.drawImage(imgHead, 110, 180, 80, 80);
            };
            // 渲染文字
            var showText = 'momoko邀请你领红包';
            cxt.font = '700 18px 楷体';
            cxt.fillStyle = '#fc035f';
            cxt.fillText(showText, 75, 290);
            var imgErweima = new Image();
            imgErweima.src = 'images/erweima.png';
            imgErweima.onload = function() {
                cxt.drawImage(imgErweima, 95, 310);
            };
        };
        console.dir(canvasEle);
        // 下载海报
        var btn = document.querySelector('button');
        btn.onclick = function() {
            // canvasEle.toDataURL:将canvas元素转换为图片格式base64
            var toImg = canvasEle.toDataURL('image/png');
            // 创建一个a标签
            var aELe = document.createElement('a');
            // 将base64图片格式数据设置给href属性
            aELe.href = toImg;
            // 设置一个a标签下载的download的属性,这样浏览器可以允许进行dataURL下载
            // 下载图片的文件名称
            aELe.download = '邀请发送红包';
            document.body.appendChild(aELe);
            // 直接点击--自动点击a标签进行下载
            aELe.click();
            // 下载完成后,即删除a标签
            aELe.remove();
        }
    </script>
    <!-- 总结:
        1.下载功能需要以服务器形式打开 http:// 
        2.设置a标签的href和download属性
        3.建议:自动调用a标签的点击事件,a元素下载完成后,删除
    -->

20-a标签用法扩展

<body>
    <a href="images/火花222座位表.xlsx">下载excel</a>
    <a href="images/liu.jpg" download="下载图片">下载图片</a>
</body>

21-字体图标的应用

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('iconfont.ttf?t=1659923513178') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-zhouzi:before {
  content: "\e697";
}

||

 <link rel="stylesheet" href="./fonts/iconfont.css">
    <style>
        .icon-zhouzi {
            color: red;
        }
    </style>
</head>

<body>
    <!-- 2.引入内容 -->
    <span class="iconfont icon-zhouzi"></span>
</body>

22-svg代码直接插入网页中使用

<body>
    <svg width="200px" height="200px"> 
        <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="pink"/> 
    </svg>
    <svg t="1659924026472" class="icon" viewBox="0 0 1034 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2455" width="200" height="200"><path d="M160.703177 1018.742857c-34.857143 0.114286-66.971429-18.514286-84.228571-48.8-16.342857-3.428571-31.657143-10.971429-44.228572-21.942857-18.057143-15.771429-29.485714-37.714286-31.771428-61.6-2.514286-24.914286 5.028571-49.714286 21.028571-68.914286 14.514286-17.714286 34.971429-29.6 57.485714-33.485714-55.771429-86.742857-77.6-174.4-60-246.285714 14.628571-59.885714 49.828571-84.914286 98.514286-119.428572 34.857143-24.8 82.628571-58.628571 147.428572-121.257143 74.171429-71.657143 122.285714-134.514286 157.485714-180.342857 23.657143-30.857143 42.4-55.314286 61.828571-73.714285 26.628571-25.371429 53.942857-37.714286 83.542857-37.714286 4.914286 0 9.828571 0.342857 14.742858 1.028571l1.6 0.228572c3.314286-0.228571 6.628571-0.457143 10.057142-0.457143 52.685714 0 113.6 34.285714 166.857143 74.285714 4.114286-6.171429 8.914286-11.885714 14.285715-16.914286 17.371429-16.342857 40.228571-25.485714 64.114285-25.485714 3.085714 0 6.285714 0.114286 9.371429 0.457143 42.057143 4.228571 75.2 36 83.542857 76.114286 46.628571 26.857143 62.628571 86.4 35.771429 133.028571-4.8 8.342857-10.857143 15.885714-17.828572 22.514286 42.285714 56.571429 77.257143 120.914286 72.685714 175.314286 0.114286 0.571429 0.114286 1.028571 0.228572 1.6 4.571429 33.485714-5.942857 64-32.228572 93.485714-18.857143 21.142857-45.028571 41.257143-78.171428 66.628571-45.828571 35.2-108.685714 83.314286-180.342857 157.485715-62.628571 64.8-96.571429 112.571429-121.257143 147.428571-34.628571 48.571429-59.657143 83.771429-119.542857 98.514286-16.8 4-33.942857 6.057143-51.2 5.942857-41.371429 0-85.828571-10.628571-132.228572-31.657143-19.314286-8.8-38.057143-18.857143-56-30.171429-11.542857 33.142857-40.342857 57.371429-75.085714 62.971429-5.485714 0.685714-10.971429 1.142857-16.457143 1.142857z" fill="#25467A" p-id="2456"></path><path d="M113.16032 932c4.571429 25.485714 29.6 42.514286 55.885714 38.057143 23.542857-4 40.114286-23.771429 40.114286-46.057143 0-2.742857-0.228571-5.371429-0.685714-8.114286-1.828571-10.057143-5.142857-19.657143-9.942857-28.685714l162.171428-167.085714c16.571429-19.085714 14.628571-47.885714-4.457143-64.457143-0.571429-0.457143-1.028571-0.914286-1.6-1.371429-20.571429-16.571429-50.628571-13.942857-68.114285 5.942857L120.36032 832c-9.485714-1.485714-19.085714-1.942857-28.571429-1.257143C65.274606 833.142857 45.731749 856 48.246034 881.714286s26.057143 44.571429 52.685715 42.171428c0 0 6.285714-0.342857 9.485714 2.628572 1.371429 1.485714 2.4 3.428571 2.742857 5.485714z" fill="#F3F3F3" p-id="2457"></path><path d="M575.903177 53.714286c-71.657143-9.714286-100.228571 106.285714-277.6 277.714285C145.503177 479.085714 84.131749 473.028571 65.617463 549.028571c-21.6 88.685714 35.314286 204.457143 120.914286 293.714286 89.257143 85.485714 205.028571 142.514286 293.6 120.914286 76-18.514286 69.942857-80 217.6-232.685714 171.542857-177.371429 287.428571-206.057143 277.714285-277.714286-9.371429-68.114286-116.342857-57.028571-233.371428-166.171429-109.028571-117.028571-98.057143-224-166.171429-233.371428z" fill="#E64A19" p-id="2458"></path><path d="M697.731749 730.971429C550.074606 883.657143 556.131749 945.028571 480.131749 963.542857c-88.571429 21.6-204.342857-35.314286-293.6-120.914286-37.257143-38.857143-69.142857-82.857143-91.428572-127.314285 14.628571 20.342857 30.628571 39.657143 47.885714 57.714285 89.371429 85.371429 207.657143 139.885714 300.8 113.714286 80-22.514286 76.228571-86.171429 236.228572-251.314286 120-123.885714 213.485714-182.171429 262.628571-227.885714 18.285714 11.657143 30.057143 25.028571 32.8 45.6 9.828571 71.771429-106.171429 100.342857-277.714285 277.828572z" fill="#CF4216" p-id="2459"></path><path d="M742.074606 287.085714c117.028571 109.142857 224 98.057143 233.371428 166.171429 1.714286 11.428571-0.228571 23.2-5.485714 33.6-0.914286 1.028571-1.828571 2.057143-2.857143 2.971428-58.742857 58.742857-202.171429 10.742857-320.342857-107.428571s-166.285714-261.6-107.428571-320.342857c1.028571-0.914286 1.942857-1.942857 2.971428-2.857143 10.4-5.257143 22.057143-7.2 33.6-5.485714 68.228571 9.371429 57.142857 116.342857 166.171429 233.371428z" fill="#FF7043" p-id="2460"></path><path d="M827.103177 202.057143c111.428571 111.542857 177.942857 225.828571 134.971429 268.685714s-168.114286-12.571429-279.657143-124.114286-167.085714-236.571429-124.114286-279.428571 157.257143 23.428571 268.8 134.857143z" fill="#FF8A65" p-id="2461"></path><path d="M787.56032 241.714286c54.742857 54.742857 88.228571 109.942857 68.8 129.485714s-79.657143-9.142857-134.285714-63.885714-83.428571-114.857143-63.885715-134.4 74.628571 14.057143 129.371429 68.8z" fill="#FF7043" p-id="2462"></path><path d="M894.188891 150.971429c25.485714 4.571429 42.514286 29.6 38.057143 55.885714-4 23.542857-23.771429 40.114286-46.057143 40.114286-2.742857 0-5.371429-0.228571-8.114285-0.685715-10.057143-1.828571-19.657143-5.257143-28.685715-9.942857l-68.685714 66.171429c-11.428571 6.742857-31.2-2.4-48.685714-19.885715s-23.771429-36.228571-20.114286-45.485714l82.057143-78.971428c-1.6-9.485714-1.942857-19.085714-1.257143-28.571429 2.4-26.514286 25.257143-46.171429 50.971429-43.542857s44.571429 26.057143 42.171428 52.685714c0 0-0.342857 6.285714 2.628572 9.485714 1.714286 1.371429 3.657143 2.4 5.714285 2.742858z" fill="#F3F3F3" p-id="2463"></path><path d="M405.16032 659.428571c-38.171429 0-69.142857-30.971429-69.142857-69.257142 0-7.657143 6.171429-13.828571 13.828571-13.828572 7.314286 0 13.485714 5.714286 13.828572 13.028572v0.8c-0.342857 22.971429 17.942857 41.828571 40.8 42.171428 22.971429 0.342857 41.828571-17.942857 42.171428-40.8v-1.371428c-0.228571-7.657143 5.828571-14.057143 13.371429-14.285715 7.657143-0.228571 14.057143 5.828571 14.285714 13.371429v0.8c0 38.285714-30.971429 69.257143-69.142857 69.371428zM225.274606 479.542857c-0.342857 22.971429 17.942857 41.828571 40.8 42.171429s41.828571-17.942857 42.171428-40.8v-1.371429c-0.342857-22.971429-19.314286-41.257143-42.171428-40.8-22.4 0.342857-40.457143 18.4-40.8 40.8zM501.96032 479.542857c-0.342857 22.971429 17.828571 41.828571 40.8 42.285714 22.971429 0.342857 41.828571-17.828571 42.285714-40.8v-1.485714c-0.342857-22.971429-19.314286-41.257143-42.171428-40.8-22.4 0.342857-40.571429 18.4-40.914286 40.8z" fill="#25467A" p-id="2464"></path><path d="M211.446034 548.685714h-55.314285c-15.314286 0.342857-27.428571 12.914286-27.085715 28.228572 0.342857 14.857143 12.228571 26.857143 27.085715 27.085714H211.446034c15.314286 0.342857 27.885714-11.771429 28.228572-27.085714s-11.771429-27.885714-27.085715-28.228572h-1.142857z m442.857143 0H598.874606c-15.314286 0.342857-27.428571 12.914286-27.085715 28.228572 0.342857 14.857143 12.228571 26.857143 27.085715 27.085714h55.314285c15.314286-0.342857 27.428571-12.914286 27.085715-28.228571-0.228571-14.742857-12.228571-26.742857-26.971429-27.085715z" fill="#FFAB91" p-id="2465"></path></svg>
</body>

23-引入svg文件

<body>
    <!-- 使用标签进行引入 -->
    <img src="images/zhouzi.svg" alt="">
</body>

24-css样式引入svg文件

 <style>
        .box {
            width: 100px;
            height: 100px;
            background: url(images/zhouzi.svg);
            background-size: cover;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>