html5、css3、およびjsを使用して、円に沿って32個の長方形を描画する必要があります。この画像で私の目標を確認できます。
私が設計した解決策は、回転、座標、および z-index を増やすたびに 32 個の長方形を生成する "a for" を js で作成することでした。やってみたけど難しすぎる。
私を助けてください。
html5、css3、およびjsを使用して、円に沿って32個の長方形を描画する必要があります。この画像で私の目標を確認できます。
私が設計した解決策は、回転、座標、および z-index を増やすたびに 32 個の長方形を生成する "a for" を js で作成することでした。やってみたけど難しすぎる。
私を助けてください。
これにより、写真のようなキャンバスが作成されます。必要に応じて変数を調整します。
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/の作業サンプル
EDITこれは間違っていました(OPはキャンバスではなく個別のDOM要素を望んでいました)が、参照用にここに残されています。DOM ベースのメソッドについては、他の回答を参照してください。
これは完璧ではありませんが、非常によく似たものになります...
div {
width: 200px;
height: 200px;
border: 10px dotted #E5E5E5;
border-radius: 200px;
}
これは、単一のキャンバスではなく、各長方形に実際のDOM要素を持つというOPの要件を示すために更新された新しいバージョンです。
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 に適しています。
これは 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/