要许愿吗？这里有龙珠的七种绘制方案

介绍

中秋将至，还在用孔明灯许愿么，作为90后中二码农来说，许愿当然用七龙珠召唤神龙才靠谱啦。本期就给大家带来七龙珠的七种绘制的方案（其实是里面的小五角星啦），里面涉及到css，svg和canvas，希望借此让你的基本功更加精进。

正文

球体

因为我们着重去讲解绘制五角星的多种方案，所以球体的绘制方法都是相同的，我们先来简单说一下，球体的绘制吧。

$size:200px;
.ball{
  width: $size;
  height: $size;
  position:relative;
  margin: calc(50vh - 100px) auto;
  background-color: #FBAB7E;
  background-image: linear-gradient(315deg, #FBAB7E 10%, #F7CE68 90%);
  box-shadow: 0px 1px 15px rgba(252, 194, 36, 0.5);
  border-radius: 50%;
  &::before{
    content: "";
    display: block;
    background: radial-gradient(1.8em 2em at 28% 18%,#fff6 15%,#fff0), radial-gradient(2em 2.5em at 18% 30%,#fff4 15%,#fff0), radial-gradient(100% 100% at 50% 33%,#0000 25%,#0002 52%);
    border-radius: 50%;
    box-shadow: 0 0 0.3em 0.1em #0003 inset;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
  }
}

其实就是用 border-radius：50% 绘制一个圆形，用 linear-gradient 渐变做出一些背景色，然后再用 box-shadow 做外发光效果，为了更加逼真，这里又加了一个伪元素 before ，用 radial-gradient 和 box-shadow 相互作用来模拟一个阳光照射的打光效果。就这样龙珠的球体就绘制完成了，后面的所有的红色五角星就会在这里面呈现了。

一星球

一星球中的五角星我们用了 svg 的 polygon ，我们在 polygon 的 points 中传入星星的各个顶点，用 fill 填充红色，非常快速的一颗小星星就完成了。

<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <polygon class="star" points="49,5 64,35 98,40 73,62 79,94 49,79 18,94 24,62 0,39 33,35" fill="rgb(231, 68, 27)" />
</svg>

二星球

在做一星球的时候用svg的 polygon ，如果再多做一颗星，那么就要再复制出 polygon 会是整个代码变得杂乱，更优雅的方式就是用 defs 包裹 polygon ，defs 定义了以后需要重复使用的图形元素，在其视口中，任意地方利用 use 这些图形元素便可呈现。

<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <polygon id="star" points="49,5 64,35 98,40 73,62 79,94 49,79 18,94 24,62 0,39 33,35" fill="rgb(231, 68, 27)" />
    </defs>
    <use class="star" href="#star" />
    <use class="star" href="#star" />
</svg>

三星球

svg 除了在 html 中可以写入，其实在css中也可以当背景图写入使用：

$star-url:url('data:image/svg+xml,<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="49,5 64,35 98,40 73,62 79,94 49,79 18,94 24,62 0,39 33,35" fill="rgb(231, 68, 27)" /></svg>');

三星球是三颗小星星堆叠在一起的，我们通过在球体中再加一个伪元素 before ，在其中设置 background-position 计算好背景图的位置就可以呈现出三星球的效果了。

$star-size:42px;
.ball{
    &::after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: $star-url,$star-url,$star-url;
    background-size: $star-size $star-size;
    background-repeat: no-repeat;
    background-position: 
    50% 33%,
    32% 66%,
    68% 66%;
  }
}

四星球

四星球绘制其实采用了 border 制三角形的方案，你可仔细看这些五星，其实是由三个三角形分别是由它本身和两个伪类而相互拼接而成的，当然为了更好的调整和控制，我这里还用了 scss 做图形模板继承。

%shape {
  width: 0;
  height: 0;
  border-color:rgb(231, 68, 27) transparent transparent transparent;
  border-style: solid;
  border-width: 15px 21px;
  transform-origin: 50% 22.5%;
  position: absolute;
}
.star{
  @extend %shape;
  &::after,
  &::before{
    content:"";
    display: block;
    top: -15px;
    left: -21px;
    @extend %shape;
  }
  &::before{
    transform: rotate(72deg);
  }
  &::after{
    transform: rotate(-72deg);
  }
}

五星球

五星球的绘制主要用到了 clip-path ，用裁剪方式创建元素的可显示区域。与 svg 相似还是传入多边形的几个定点坐标，来完成裁剪的。

$star-size:42px;
$star-polygon: polygon(50% 0%, 62% 34%, 98% 35%, 69% 56%, 80% 92%, 50% 70%, 20% 92%, 31% 56%, 2% 35%, 38% 34%);

.star{
  width: $star-size;
  height: $star-size;
  background-color: rgb(231, 68, 27);
  clip-path: $star-polygon;
}

六星球

六星球我们还是跟三星球一样，在css中传入 svg ，但用法不同，六星球的绘制可以用 mask 蒙层来非常轻松的实现它。

$size:200px;
$star-url:url('data:image/svg+xml,<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="49,5 64,35 98,40 73,62 79,94 49,79 18,94 24,62 0,39 33,35" fill="rgb(231, 68, 27)" /></svg>');
$star-size:42px;

.star{
  width: $star-size;
  height: $star-size;
  background-color: rgb(231, 68, 27);
  position: absolute;
  display: block;
  mask:$star-url;
  -webkit-mask-image: $star-url;
  mask-image: $star-url;
}

七星球

七星球就要写 js了，这里希望通过创建 canvas ，画布绘制出五角星，再用 toDataURL 方法导出到 base64 最后作为背景图填充到星星元素中。

这里主要说明一下，在画布中如何来绘制五角星的，其实很简单就是可以把五角星假想成两个圆环相互嵌套，在这两个圆环中，计算角度去找到顶点坐标然后把他们串联起来，五角星自然就成了。

function createStarImage() {
    let src = ""
    return function () {
        if (src) return src;
        let canvas = document.createElement("canvas");
        let ctx = canvas.getContext("2d");
        canvas.width = ctx.width = 100;
        canvas.height = ctx.height = 100;
        ctx.save();
        ctx.beginPath();
        let r = 21, R = 50;
        for (let i = 0; i < 5; i++) {
            ctx.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * R + R,
                       -Math.sin((18 + i * 72) / 180 * Math.PI) * R + R);
            ctx.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * r + R,
                       -Math.sin((54 + i * 72) / 180 * Math.PI) * r + R);
        }
        ctx.closePath();
        ctx.fillStyle = `rgb(231, 68, 27)`;
        ctx.fill();
        ctx.restore();
        return src = canvas.toDataURL("image/png")
    }
}

结语

其实本次案例就是借着绘制五角星来给大家展示css，svg和canvas相互组合的强大，当然绘制方案还有很多这里就不一一举例了，希望大家继续探索下去。最后，祝愿大家中秋快乐，阖家团圆，最重要的是美梦成真哦~