javascript - 使用 html5、css3 和 js 沿圆形绘制矩形

Question

我必须使用 html5、css3 和 js 沿着一个圆圈绘制 32 个矩形。你可以通过这张图片看到我的目标：

.

我设计的解决方案是在 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 的方法，请参阅我的其他答案。

Answer 2

这并不完美，但它得到了一些非常相似的东西......

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

js小提琴。

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 fiddle，以便人们可以看到它有效。http://jsfiddle.net/AaJ94/