jquery – 创建一个具有24或以上点突发的“新”尖刻标签

我正在尝试点击下面的图像：

目前，我已经尝试过使用伪元素，但是，我只能生成一个12点突发，并不反映在图像中显示哪一个。

有没有创造一个点爆裂只有几个元素？

以下是我用来尝试这个解决方案的代码：

div{
    width:100px;
    height:100px;
    background:grey;
    transform:rotate(45deg);
    margin:50px;
}
div:after{
    position:absolute;
    content:"";
    background:grey;
    width:100px;
    height:100px;
    transform:rotate(135deg);
}
div:before{
    position:absolute;
    content:"";
    background:grey;
    width:100px;
    height:100px;
    transform:rotate(250deg);
}

<div></div>

解决方法

帆布方法

您也可以使用Canvas来实现。在画布上绘制的命令与SVG几乎相同。该方法在非常高的水平上将是在两个圆上找到点(半径为x，另一个具有稍小的半径)，然后将它们连接在一起形成路径。当路径被填充时，它给出了n点突发的出现。

在下图中，绿圈是半径为x的较大圆，蓝色圆是较小的内圆。通过在圆上绘制点并连接它们(使用lineto命令)，我们得到红色的路径。当这条路径被填满时，我们得到了爆裂的外观。 (注：内圈和外圈仅用于说明，不在实际图中绘制)。

计算逻辑

>圆上每个点的X和Y坐标可以使用下列公式计算：

> x =(圆半径* Cos(radians中的角度))x中心坐标
> y =(圆半径* Sin(弧度角))y坐标中心

使用以下逻辑确定点在圆上绘制的角度：

>如同您和Persijn的答案一样，角度计算为(360 /不是爆发)。使用360是因为它是圆内的总角度。
>内圈上的点的角度应该在较大圆上的点1和点2之间的一半，因此增加了三角形。三角洲是一半(360 /不是爆发)

>弧度角度=角度角度*π/ 180

window.onload = function() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var defaultBurst = 18;
  var defaultContent = "New";

  function paint(numBurst,text) {
    if (!numBurst) numBurst = defaultBurst;
    if (!text) text = defaultContent;
    ctx.clearRect(0,canvas.width,canvas.height);
    ctx.fillStyle = 'crimson';
    var angleInRad = Math.PI * (360 / numBurst) / 180;
    var deltaAngleInRad = angleInRad / 2;
    ctx.beginPath();
    ctx.moveto(75,150);
    for (i = 0; i <= numBurst; i++) {
      x1 = 75 * Math.cos(angleInRad * i) + 150;
      y1 = 75 * Math.sin(angleInRad * i) + 150;
      x2 = 60 * Math.cos((angleInRad * i) + deltaAngleInRad) + 150;
      y2 = 60 * Math.sin((angleInRad * i) + deltaAngleInRad) + 150;
      ctx.lineto(x1,y1);
      ctx.lineto(x2,y2);
    }
    ctx.closePath();
    /* Add shadow only for shape */
    ctx.shadowOffsetX = -5;
    ctx.shadowOffsetY = 5;
    ctx.shadowBlur = 5;
    ctx.shadowColor = "rgba(0,0.5)";
    ctx.fill();
    ctx.font = "32px Arial";
    ctx.textAlign = "center";
    ctx.fillStyle = "gold";
    /* Nullify shadow for text */
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    ctx.fillText(text,150,160,120);
  }
  paint();
  var slider = document.getElementById('burst');
  var textInput = document.getElementById('content');
  slider.addEventListener('change',function() {
    paint(this.value,textInput.value);
  });

  textInput.addEventListener('blur',function() {
    paint(slider.value,this.value);
  });
}

/* For demo only */

.controls {
  float: right;
  padding: 5px;
  margin: 50px 20px;
  line-height: 25px;
  border: 1px solid;
  Box-shadow: 1px 1px 0px #222;
}
label,input {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
}
h3 {
  padding: 10px;
  text-align: center;
}
label {
  width: 100px;
}
input[type='range'],input[type='text'] {
  width: 100px;
}
body {
  font-family: Calibri;
  background-image: radial-gradient(circle,#3F9CBA 0%,#153346 100%);
}

<canvas id='canvas' height='300px' width='300px'></canvas>
<div class='controls'>
  <h3>Controls</h3>

  <label for="burst">Change Burst:</label>
  <input id="burst" class="slider" type="range" value="18" min="12" max="36" step='2' title="Adjust slider to increase or decrease burst" />
  <br/>
  <label for="content">Text Content:</label>
  <input type="text" id="content" maxlength="5" />
</div>

高级演示

查看这个CodePen的高级演示，具有路径创建动画，阴影，控制所有功能等功能。

使用建议

如果您想在页面某处的固定大小的图像，则Canvas与SVG一样好。但是，如果您需要可以缩放到任何尺寸的图像，则Canvas不是正确的选择，因为Canvas是基于栅格的，并且在缩放时变为像素化或模糊。

如果您的形状需要动态数量的突发和/或文本，则Canvas将比SVG和CSS更可取，因为您不必执行任何DOM操作。