我正在尝试点击下面的图像：
目前，我已经尝试过使用伪元素，但是，我只能生成一个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操作。
