Question

我必须使用html5，css3和js沿圆圈绘制32个矩形。您可以使用此图片查看我的目标：

myGoal http://i50.tinypic.com/mc8z1f.png

我设计的解决方案是在js中创建“a for”，每次增加旋转，坐标和z-index时将生成32个矩形。我试过但它太错综复杂了。

请帮帮我。

Answer 1

这会像你的图片一样创建一个画布 - 根据需要调整变量：

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

var w = canvas.width;
var h = canvas.height;

var r1 = Math.min(w, h) * 0.4;    // outer radius
var r0 = r1 - 40;                 // inner radius

var n = 32;                       // number of blocks

var theta = 2 * Math.PI / n;
var phi = theta * 0.45;           // relative half-block width

ctx.save();
ctx.fillStyle = '#c0c0c0';
ctx.translate(w / 2, h / 2);      // move to center of circle

for (var i = 0; i < n; ++i) {
    ctx.beginPath();
    ctx.arc(0, 0, r0, -phi, phi);
    ctx.arc(0, 0, r1, phi, -phi, true);
    ctx.fill();
    ctx.rotate(theta);            // rotate the coordinates by one block
}

ctx.restore();

http://jsfiddle.net/alnitak/qxZ5b/

的工作样本

编辑这是不正确的（OP需要单独的DOM元素，而不是画布）但是留在这里供参考。有关基于DOM的方法，请参阅我的other answer。

Answer 2

这不是完美的，但它会变得非常相似...

div {
   width: 200px;
   height: 200px;
   border: 10px dotted #E5E5E5;
   border-radius: 200px;    
}

jsFiddle

Example

Answer 3

这是一个新版本，更新后显示OP要求为每个矩形设置一个实际的DOM元素，而不是单个画布：

var n = 32;

for (var i = 0; i < n; ++i) {
    var d = document.createElement('div');
    var r = 360 * i / n;
    var s = 'translate(200px,200px) rotate(' + r + 'deg) translate(0px, -180px)';

    d.setAttribute('class', 'box');
    d.setAttribute('style', '-webkit-transform:' + s);

    var t = document.createTextNode(i);
    d.appendChild(t);

    document.body.appendChild(d);
}

http://jsfiddle.net/alnitak/CFAyf/的工作演示，其中包含一些额外的（和必要的）CSS

注意：您需要使用浏览器检测来设置正确的-transform样式属性。显示的示例适用于Chrome和Safari。

Answer 4

只能使用CSS执行此操作。它是否适用于另一个项目，适用于ie9 +和所有现代浏览器。

这会创建一个带有单独DOM元素的圆圈，可点击，不可以。

<div class="wrapper" id="wrapper">
             <ul>
            <li><a href="#"><span class=""></span></a></li>
            <li><a href="#"><span class=""></span></a></li>
            <li><a href="#"><span class=""></span></a></li>
            <li><a href="#"><span class=""></span></a></li>
            <li><a href="#"><span class=""></span></a></li>
            <li><a href="#"><span class=""></span></a></li>
            <li><a href="#"><span class=""></span></a></li>
            <li><a href="#"><span class=""></span></a></li>
            <li><a href="#"><span class=""></span></a></li>
            <li><a href="#"><span class=""></span></a></li>
            <li><a href="#"><span class=""></span></a></li>
            <li><a href="#" ><span class=""></span></a></li>
             </ul>
            <div class="content"><p id="timeFirst"></p><br /><p>till</p><br /><p class="timeLast"></p></div>
            </div>
            </div>

和css

.csstransforms .wrapper {
      display: block;
      font-size:1em;
      width: 10em;
          height: 10em;
          border-radius: 50%; 
          position: relative;
      overflow: hidden;
      margin: 0 auto;
      z-index: 99;
 }
.csstransforms .wrapper li
{
    list-style: none;
    position:absolute;
    overflow:hidden;
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    width: 10em;
    height: 10em;
    top: 50%;
    left: 50%;
    margin-top: -10em;
    margin-left: -10em;
    border-bottom: 1px solid white; 
}
.csstransforms .wrapper li a
{
    display: block;
    width: 10.5em;
    height: 10.5em;
    position: absolute;
    top:50%;
    left:50%;
    bottom: -7.5em;
    right: -7.5em;
    background-color: #D9D9D9; 
    text-align: center;
    -webkit-transform: skew(-60deg) rotate(-90deg) scale(2);
    -moz-transform: skew(-60deg) rotate(-90deg) scale(2);
    -ms-transform: skew(-60deg) rotate(-90deg) scale(2);
    -o-transform: skew(-60deg) rotate(-90deg) scale(2);
    transform: skew(-60deg) rotate(-90deg) scale(2);
}
.wrapper .content
{   
    position: absolute;
    width: 8em;
    height: 8em;
    border-radius: 50%;
    background-color:#FFFFFF;
    top:10%;
    left:10%;
    z-index: 25;
}
.csstransforms .wrapper li a:hover,
.csstransforms .wrapper li a:focus,
.csstransforms .wrapper li a:active
{
    background-color: #919191;
    cursor: pointer;
}
.csstransforms .wrapper li:nth-child(9) a
{
    background-color: #F9F9F9;
    cursor: default;

}
.csstransforms .wrapper li:nth-child(9) a:hover,
.csstransforms .wrapper li:nth-child(9) a:focus,
.csstransforms .wrapper li:nth-child(9) a:active
{
    background-color: #F9F9F9;
    cursor: default;

}
.active /*Later for use with JS */
{
    background-color:#32ADCF;
}
.csstransforms .wrapper li:first-child {
  -webkit-transform: rotate(30deg) skew(60deg);
  -moz-transform: rotate(30deg) skew(60deg);
  -ms-transform: rotate(30deg) skew(60deg);
  -o-transform: rotate(30deg) skew(60deg);
  transform: rotate(30deg) skew(60deg);

}

.csstransforms .wrapper li:nth-child(2) {
  -webkit-transform: rotate(60deg) skew(60deg);
  -moz-transform: rotate(60deg) skew(60deg);
  -ms-transform: rotate(60deg) skew(60deg);
  -o-transform: rotate(60deg) skew(60deg);
  transform: rotate(60deg) skew(60deg);

}

.csstransforms .wrapper li:nth-child(3) {
  -webkit-transform: rotate(90deg) skew(60deg);
  -moz-transform: rotate(90deg) skew(60deg);
  -ms-transform: rotate(90deg) skew(60deg);
  -o-transform: rotate(90deg) skew(60deg);
  transform: rotate(90deg) skew(60deg);
}
.csstransforms .wrapper li:nth-child(4) {
  -webkit-transform: rotate(120deg) skew(60deg);
  -moz-transform: rotate(120deg) skew(60deg);
  -ms-transform: rotate(120deg) skew(60deg);
  -o-transform: rotate(120deg) skew(60deg);
  transform: rotate(120deg) skew(60deg);
}
.csstransforms .wrapper li:nth-child(5) {
  -webkit-transform: rotate(150deg) skew(60deg);
  -moz-transform: rotate(150deg) skew(60deg);
  -ms-transform: rotate(150deg) skew(60deg);
  -o-transform: rotate(150deg) skew(60deg);
  transform: rotate(150deg) skew(60deg);
}

.csstransforms .wrapper li:nth-child(6) {
  -webkit-transform: rotate(180deg) skew(60deg);
  -moz-transform: rotate(180deg) skew(60deg);
  -ms-transform: rotate(180deg) skew(60deg);
  -o-transform: rotate(180deg) skew(60deg);
  transform: rotate(180deg) skew(60deg);
}
.csstransforms .wrapper li:nth-child(7) {
  -webkit-transform: rotate(210deg) skew(60deg);
  -moz-transform: rotate(210deg) skew(60deg);
  -ms-transform: rotate(210deg) skew(60deg);
  -o-transform: rotate(210deg) skew(60deg);
  transform: rotate(210deg) skew(60deg);
}
.csstransforms .wrapper li:nth-child(8) {
  -webkit-transform: rotate(240deg) skew(60deg);
  -moz-transform: rotate(240deg) skew(60deg);
  -ms-transform: rotate(240deg) skew(60deg);
  -o-transform: rotate(240deg) skew(60deg);
  transform: rotate(240deg) skew(60deg);
}
.csstransforms .wrapper li:nth-child(9) {
  -webkit-transform: rotate(270deg) skew(60deg);
  -moz-transform: rotate(270deg) skew(60deg);
  -ms-transform: rotate(270deg) skew(60deg);
  -o-transform: rotate(270deg) skew(60deg);
  transform: rotate(270deg) skew(60deg);
}
.csstransforms .wrapper li:nth-child(10) {
  -webkit-transform: rotate(300deg) skew(60deg);
  -moz-transform: rotate(300deg) skew(60deg);
  -ms-transform: rotate(300deg) skew(60deg);
  -o-transform: rotate(300deg) skew(60deg);
  transform: rotate(300deg) skew(60deg);
}
.csstransforms .wrapper li:nth-child(11) {
  -webkit-transform: rotate(330deg) skew(60deg);
  -moz-transform: rotate(330deg) skew(60deg);
  -ms-transform: rotate(330deg) skew(60deg);
  -o-transform: rotate(330deg) skew(60deg);
  transform: rotate(330deg) skew(60deg);
}
.csstransforms .wrapper li:nth-child(12) {
  -webkit-transform: rotate(360deg) skew(60deg);
  -moz-transform: rotate(360deg) skew(60deg);
  -ms-transform: rotate(360deg) skew(60deg);
  -o-transform: rotate(360deg) skew(60deg);
  transform: rotate(360deg) skew(60deg);
   z-index:-1; /* Last element index set to minus to fix a bug in IE9+ */

}

使用32个矩形旋转的公式将是360/32 = 11.25作为中心角。然后你需要使用公式90-x（其中X是你的中心角）倾斜矩形以适合你的中心角度78,75。如果您想要矩形内的内容，则需要使用用于倾斜列表项的相反值来扭曲它们。使用公式90 - （x / 2）向后旋转列表项的内容，其中x是中心角。所以对你来说这将是90 - （11,25 / 2）= 84.4

<强> 被修改

添加了一个工作的JS小提琴，以便人们可以看到它的工作原理。 http://jsfiddle.net/AaJ94/

使用html5，css3和js沿圆绘制矩形

4 个答案: