javascript - 创建线性圆形 css 元素

Question

我想创建像下面这张图片一样的东西，但这种形状无关紧要，线条会有所不同。

但是我尝试只使用 css 编写一些代码

这是我的代码

.main{
  width:100%;
  height:400px;
  background:#ddd;
}

.js{
  width:110px;
  height:110px;
  background:red;
  border-radius: 50%;
  float:right;
  margin:30px;
  color:#000;
  text-align:center;
  font-size:44px;
  line-height:110px;
}

.line1{
  width:110px;
  height:4px;
  background:red;
  -webkit-transform:rotate(-230deg);
  float:right;
  margin:120px -55px 0 0;
}

.line2{
  width:110px;
  height:4px;
  background:red;
  -webkit-transform:rotate(330deg);
  float:right;
  margin:188px -30px 0 0;
}

.line3{
  width:110px;
  height:4px;
  background:red;
  -webkit-transform:rotate(-330deg);
  float:right;
  margin:244px -110px 0 0;
}

.round1{
  width:20px;
  height:20px;
  border-radius:50%;
  background:red;
  float:right;
  margin:160px -25px 0 0;
}

.round2{
  width:20px;
  height:20px;
  border-radius:50%;
  background:red;
  float:right;
  margin:210px -25px 0 0;
}

.round3{
  width:20px;
  height:20px;
  border-radius:50%;
  background:red;
  float:right;
  margin:260px -105px 0 0;
}

但是我认为我使用了很多代码，而我写的代码不喜欢我，我想使用 jQuery 或更复杂的 CSS feutures 来实现类似的结果。你认为这有什么可能？你能给我一些建议让我的 css 更准确或使用 jQuery 创建类似的结果吗？ 谢谢

Fiddle

Answer 1

Canvas

就像我在评论中所说的那样，我会选择 Canvas 。您已经在使用 css3，这意味着此处仅支持现代浏览器。说更好的办法是svg或者canvas。

canvas 具有最好的性能，但是如果你想要点击事件，你需要添加一个碰撞检测脚本。在这种情况下，svg 更容易处理。

这是在 canvas 中如何完成的...如您所见，我在 20 分钟内写完了...这意味着它可以写得更好。

使用 Canvas

var c=document.createElement('canvas');c.width=500;c.height=500;
document.body.appendChild(c);
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.strokeStyle='red';
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.lineTo(250,130);
ctx.lineTo(200,170);
ctx.stroke();
ctx.fillStyle='red';
ctx.beginPath();
ctx.arc(200,170,32,0,2*Math.PI,false);
ctx.fill();
ctx.arc(300,150,8,0,2*Math.PI,false);
ctx.fill();
ctx.beginPath();
ctx.arc(250,130,5,0,2*Math.PI,false);
ctx.fill();
ctx.fillStyle='white';
ctx.font = 'italic 40pt Calibri';
ctx.fillText('JS',181,185);

演示

http://jsfiddle.net/e9N5y/1/