pc端双六边形重叠效果（带边框的六边形）

雨化

已于 2022-02-10 15:41:10 修改

阅读量549

点赞数

分类专栏： css pc端文章标签： css3 canvas

于 2020-04-17 17:02:28 首次发布

本文链接：https://blog.csdn.net/qing_x_c/article/details/105583594

版权

css 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

pc端

1 篇文章 0 订阅

订阅专栏

首先我们最关注的当然是效果图
铛铛铛~效果图闪亮登场👇

此处应有掌声👏，
原理canvas+绝对定位+css绘制六边形
百度许久只有单个六边形，需求不一样，我也没办法，只能自己写
代码奉上↓↓↓↓↓↓↓↓↓↓↓↓
html代码


		<li>
            <canvas class="myCanvas" width='500' height='500'>测试</canvas>
            <div class="boxF">
              <div class="boxS">
                <div class="boxT" style="background: #F4F4F4;">
                  <img src="./img/idea.png" alt="">
                </div>
              </div>
            </div>
          </li>

css代码

li {
  margin-right: 45px;
  width: 370px;
  height: 426px;
  float: left;
  position: relative;
  overflow: hidden;
}
.boxF,
.boxS,
.boxT {
  width: 330px;
  height: 380px;
  overflow: hidden;
}
.boxF,
.boxS {
  box-sizing: content-box;
  visibility: hidden;
}
.boxF {
  position: absolute;
  left: 22px;
  top: 22px;
}
.boxF {
  transform: rotate(120deg);
  float: left;
  -ms-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -webkit-transform: rotate(120deg);
}
.boxS {
  transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
}
.boxT {
  transform: rotate(-60deg);
  background: no-repeat 50% center;
  background-size: 125% auto;
  -ms-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
  visibility: visible;
}
.boxT img {
  position: absolute;
  top: 100px;
  left: 140px;
}

js代码

var myCanvas = document.getElementsById("myCanvas");
    var context = myCanvas.getContext("2d");
    function drawPath(x, y, n, r) {
      var i, ang;
      ang = Math.PI * 2 / n //旋转的角度
      context.save(); //保存状态
      context.fillStyle = 'rgba(0,0,0,0)'; //填充半透明
      context.strokeStyle = '#E90000'; //线条红色
      context.lineWidth = 1; //设置线宽
      context.translate(x, y); //原点移到x,y处，即要画的多边形中心
      context.moveTo(0, -r); //据中心r距离处画点
      context.beginPath();
      for (i = 0; i < n; i++) {
        context.rotate(ang) //旋转
        context.lineTo(0, -r); //据中心r距离处连线
      }
      context.closePath();
      context.stroke();
      context.fill();
      context.restore(); //返回原始状态
    }
    drawPath(185, 213, 6, 213) //在185, 213处画一个半径为213的六边形