创建一个24个或更高点爆发的“新”尖刺标签

时间：2015-06-09 10:32:44

标签： jquery html css svg css-shapes

我正试图制作一个如下图所示的爆发点：

enter image description here

目前，我已尝试使用伪元素，但是，我只能生成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>

4 个答案:

答案 0 :(得分：16)

使用svg可以使用简单的循环。我正在使用Snap，因为它很简单。

enter image description here

首先使用snap创建一个圆然后使用循环从我引用this question的圆圈中找到我们需要的点以找到点。找到点之后，只需给出这些点的线。通过改变循环中的数字和任何值的rad值可以创建

24点爆发

var s=Snap('svg');
var circle=s.circle(50,50,30).attr({
    fill:'tomato',
    stroke:'tomato'
})
for (var num = 0; num < 24; num++) {
    var rad1 = num * 15 * (Math.PI / 180);
    var rad2 = (num+1) * 15 * (Math.PI / 180);
    var rad3=(num+.5) * 15 * (Math.PI / 180);
    var x1 = (30 * (Math.cos(rad1)) + 50)
    var y1 = (30 * (Math.sin(rad1)) + 50)
    var x2 = (40 * (Math.cos(rad3)) + 50)
    var y2 = (40 * (Math.sin(rad3)) + 50)
    var x3 = (30 * (Math.cos(rad2)) + 50)
    var y3 = (30 * (Math.sin(rad2)) + 50)
    var line=s.polyline(x1,y1,x2,y2,x3,y3).attr({
        'fill':'tomato'
    })
    }
var text=s.text(35,50,'New').attr({
    fill:'white'
})
div{
  width:100vw;
  height:100vh;
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<div>
<svg width="100%" height="100%" viewbox="0 0 100 100">
</svg>
  </div>

36分爆发

var s=Snap('svg');
var circle=s.circle(50,50,30).attr({
    fill:'tomato',
    stroke:'tomato'
})
for (var num = 0; num < 36; num++) {
    var rad1 = num * 10 * (Math.PI / 180);
    var rad2 = (num+1) * 10 * (Math.PI / 180);
    var rad3=(num+.5) * 10 * (Math.PI / 180);
    var x1 = (30 * (Math.cos(rad1)) + 50)
    var y1 = (30 * (Math.sin(rad1)) + 50)
    var x2 = (40 * (Math.cos(rad3)) + 50)
    var y2 = (40 * (Math.sin(rad3)) + 50)
    var x3 = (30 * (Math.cos(rad2)) + 50)
    var y3 = (30 * (Math.sin(rad2)) + 50)
    var line=s.polyline(x1,y1,x2,y2,x3,y3).attr({
        'fill':'tomato'
    })
    }
var text=s.text(35,50,'New').attr({
    fill:'white'
})
div{
    width:100vw;
    height:100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<div>
<svg width="100%" height="100%" viewbox="0 0 100 100">
</svg>
</div>

60分爆发

var s=Snap('svg');
var circle=s.circle(50,50,30).attr({
    fill:'tomato',
    stroke:'tomato'
})
for (var num = 0; num < 60; num++) {
    var rad1 = num * 6 * (Math.PI / 180);
    var rad2 = (num+1) * 6 * (Math.PI / 180);
    var rad3=(num+.5) * 6 * (Math.PI / 180);
    var x1 = (30 * (Math.cos(rad1)) + 50)
    var y1 = (30 * (Math.sin(rad1)) + 50)
    var x2 = (40 * (Math.cos(rad3)) + 50)
    var y2 = (40 * (Math.sin(rad3)) + 50)
    var x3 = (30 * (Math.cos(rad2)) + 50)
    var y3 = (30 * (Math.sin(rad2)) + 50)
    var line=s.polyline(x1,y1,x2,y2,x3,y3).attr({
        'fill':'tomato'
    })
    }
var text=s.text(35,50,'New').attr({
    fill:'white'
})
div{
    width:100vw;
    height:100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<div>
<svg width="100%" height="100%" viewbox="0 0 100 100">
</svg>
</div>

这也可以是动画

var s=Snap('svg');
var circle=s.circle(50,50,30).attr({
    fill:'tomato',
    stroke:'tomato'
})
var g=s.g();
for (var num = 0; num < 60; num++) {
    var rad1 = num * 6 * (Math.PI / 180);
    var rad2 = (num+1) * 6 * (Math.PI / 180);
    var rad3=(num+.5) * 6 * (Math.PI / 180);
    var x1 = (30 * (Math.cos(rad1)) + 50)
    var y1 = (30 * (Math.sin(rad1)) + 50)
    var x2 = (40 * (Math.cos(rad3)) + 50)
    var y2 = (40 * (Math.sin(rad3)) + 50)
    var x3 = (30 * (Math.cos(rad2)) + 50)
    var y3 = (30 * (Math.sin(rad2)) + 50)
    var line=s.polyline(x1,y1,x2,y2,x3,y3).attr({
        'fill':'tomato'
    })
    g.add(line);
    }
var text=s.text(35,50,'New').attr({
    fill:'white'
})
function anim(){
g.animate({
    transform:'rotate(360 50,50)'
},8000,function(){
   g.animate({
    transform:'rotate(0 50,50)'   
   },0,function(){
       anim()
   })
})
}
anim()
div{
    width:100vw;
    height:100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<div>
<svg width="100%" height="100%" viewbox="0 0 100 100">
</svg>
</div>

注意我已使用vw和vh单位进行回应

这也可以使用单个折线元素

var s=Snap('svg');
var array=[];
for (var num = 0; num < 24; num++) {
    var rad1 = num * 15 * (Math.PI / 180);
    var rad2 = (num+1) * 15 * (Math.PI / 180);
    var rad3=(num+.5) * 15 * (Math.PI / 180);
    var x1 = (30 * (Math.cos(rad1)) + 50);
    var y1 = (30 * (Math.sin(rad1)) + 50);
    var x2 = (40 * (Math.cos(rad3)) + 50);
    var y2 = (40 * (Math.sin(rad3)) + 50);
    var x3 = (30 * (Math.cos(rad2)) + 50);
    var y3 = (30 * (Math.sin(rad2)) + 50);
      array.push(x1+','+y1+' '+x2+','+y2+' '+x3+','+' '+y3);
    }
var line=s.polyline(array).attr({
        'fill':'tomato'
    })
var text=s.text(35,50,'New').attr({
    fill:'white'
})
div{
  width:100vw;
  height:100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<div>
<svg width="100%" height="100%" viewbox="0 0 100 100">
</svg>
  </div>

答案 1 :(得分：12)

这可以通过CSS实现，但在12分之后，需要多个div。

我之前在项目中使用了12点爆发警报和促销风格元素。

12点爆裂

＆＃13;
＆＃13; 
div {
  background: red;
  width: 80px;
  height: 80px;
  position: absolute;
  text-align: center;
  top: 20px;
  left: 20px;
}
div:before,
div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  background: red;
}
div:before {
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
}
div:after {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
}
＆＃13; 
<div></div>
＆＃13;
＆＃13;
＆＃13;

24点爆裂

＆＃13;
＆＃13; 
div {
    background: red;
    width: 80px;
    height: 80px;
    position: absolute;
    text-align: center;
  top: 20px;
  left: 20px;
}
div:before, div:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
}
div:before {
    -webkit-transform: rotate(30deg);
       -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
         -o-transform: rotate(30deg);
}
div:after {
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
}

div:nth-child(2) {
  transform: rotate(15deg)
}
＆＃13; 
<div></div>
<div></div>
＆＃13;
＆＃13;
＆＃13;

36点爆裂

＆＃13;
＆＃13; 
div {
    background: red;
    width: 80px;
    height: 80px;
    position: absolute;
    text-align: center;
  top: 20px;
  left: 20px;
}
div:before, div:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
}
div:before {
    -webkit-transform: rotate(30deg);
       -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
         -o-transform: rotate(30deg);
}
div:after {
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
}

div:nth-child(2) {
  transform: rotate(10deg)
}
div:nth-child(3) {
  transform: rotate(20deg)
}
＆＃13; 
<div></div>
<div></div>
<div></div>
＆＃13;
＆＃13;
＆＃13;

48点爆裂

＆＃13;
＆＃13; 
div {
  background: red;
  width: 80px;
  height: 80px;
  position: absolute;
  text-align: center;
  top: 20px;
  left: 20px;
}
div:before,
div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  background: red;
}
div:before {
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
}
div:after {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
}
div:nth-child(2) {
  transform: rotate(7.5deg)
}
div:nth-child(3) {
  transform: rotate(15deg)
}
div:nth-child(4) {
  transform: rotate(22.5deg)
}
＆＃13; 
<div></div>
<div></div>
<div></div>
<div></div>
＆＃13;
＆＃13;
＆＃13;

对于12分以上的任何内容，由于只需要一个元素，我必须认真建议使用图像或SVG作为上述答案。

答案 2 :(得分：8)

SVG

我使用了单个尖钉形状（红色形状） 把它放在defs里面所以它没有显示出来 然后多次重复使用尖峰形状并旋转它，其旋转原点设置在形状的最底部 然后创建一个具有锐边的圆形。

.POW {
  width: 250px;
  height: 250px;
  border: 1px solid black;
}
<svg class="POW" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <polygon id="spike" points="0,0, -10,-25 0,-50 10,-25"></polygon>
  </defs>
  <g class="spikes">
    <use x="50" y="50" xlink:href="#spike" transform="rotate(20 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(40 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(60 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(80 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(100 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(120 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(140 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(160 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(180 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(200 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(220 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(240 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(260 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(280 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(300 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(320 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(340 50 50)" />
    <use x="50" y="50" fill="red" xlink:href="#spike" transform="rotate(360 50 50)" />
  </g>
</svg>

您可以使用此解决方案轻松创建任意数量的峰值。 只需对轮换进行适当的划分：

24分 

.POW {
  width: 250px;
  height: 250px;
  border: 1px solid black;
}
<svg class="POW" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <polygon id="spike" points="0,0, -10,-25 0,-50 10,-25"></polygon>
  </defs>
  <g class="spikes">
    <use x="50" y="50" xlink:href="#spike" transform="rotate(0 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(15 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(30 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(45 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(60 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(75 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(90 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(105 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(120 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(135 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(150 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(165 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(180 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(195 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(210 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(225 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(240 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(240 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(255 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(270 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(285 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(300 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(315 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(330 50 50)" />
    
    <use x="50" y="50" fill="red" xlink:href="#spike" transform="rotate(345 50 50)" />
  </g>
</svg>

48分 

.POW {
  width: 250px;
  height: 250px;
  border: 1px solid black;
}
<svg class="POW" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <polygon id="spike" points="0,0, -10,-25 0,-50 10,-25"></polygon>
  </defs>
  <g class="spikes">
    <use x="50" y="50" xlink:href="#spike" transform="rotate(7.5 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(15 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(22.5 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(30 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(37.5 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(45 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(52.5 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(60 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(67.5 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(75 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(82.5 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(90 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(97.5 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(105 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(112.5 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(120 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(127.5 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(135 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(142.5 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(150 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(157.5 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(165 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(172.5 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(180 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(187.5 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(195 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(202.5 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(210 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(217.5 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(225 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(232.5 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(240 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(247.5 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(255 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(262.5 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(270 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(277.5 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(285 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(292.5 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(300 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(307.5 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(315 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(322.5 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(330 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(337.5 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(345 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(352.5 50 50)" />
    <use x="50" y="50" fill="red" xlink:href="#spike" transform="rotate(360 50 50)" />
  </g>
</svg>

计算角度的方法是将点除以360 像：360/48 = 7.5所以每个角度需要7.5。

  1. 7.5
  2. 15.0
  3. 22.5
  4. 30
  5. 37.5
    等

答案 3 :(得分：5)

画布方法

您也可以使用Canvas实现此目的。在Canvas上绘制的命令与SVG中的命令非常相似。在很高的层次上，这种方法是在两个圆上找到点（一个半径为x，另一个半径略小），然后将它们连接在一起形成一条路径。当路径被填满时，它会出现n点突发。

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

enter image description here

计算逻辑

  • 可以使用以下公式计算圆上每个点的 X和Y坐标：
    • x =（圆的半径* Cos（弧度的角度））+中心的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, 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, 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操作。

相关问题
最新问题