忍者ブログ

ひつ(じのひよこが)プログラミングします。
お仕事や趣味で困ったこととか、何度も「あれ?どうだったかしら」と調べたりしたこととか、作ったものとか、こどものこととかを書きます
★前は週末定期更新でしたが今は不定期更新です

2024/03    02« 1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25  26  27  28  29  30  31  »04

canvas を使わずに html/css で線を描く

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

コメント

ただいまコメントを受けつけておりません。

canvas を使わずに html/css で線を描く

サンプル

<div style="position: relative; height: 200px; width: 200px; background-color: white; border: 3px double black; border-radius: 100px;">
    <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(0,60%, 50%) solid; transform-origin: left top;"></div>
    <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(45,60%, 50%) solid; transform-origin: left top; transform: rotate(45deg);"></div>
    <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(90,60%, 50%) solid; transform-origin: left top; transform: rotate(90deg);"></div>
    <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(135,60%, 50%) solid; transform-origin: left top; transform: rotate(135deg);"></div>
    <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(180,60%, 50%) solid; transform-origin: left top; transform: rotate(180deg);"></div>
    <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(225,60%, 50%) solid; transform-origin: left top; transform: rotate(225deg);"></div>
    <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(270,60%, 50%) solid; transform-origin: left top; transform: rotate(270deg);"></div>
    <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(315,60%, 50%) solid; transform-origin: left top; transform: rotate(315deg);"></div>
</div>

やり方

線は border-top:1px black solid; 等として描く。width を使って長さをコントロールしている。別に hr でやってもいいのかもしれない。

CSS の transform の値に rotate を使えば要素を回転させられるので、これで線の向きをコントロールしている。ただし、回転の際に基準となる点はそのままだと要素の中央なので、これを transform-origin: left top; で左上にしている。

だいぶ邪道な気がするが、こんなやり方もできたよ、という例。また、点A から 点B という指定もできず、「点A からどの方向に長さいくつの」という指定しかできないのも難点。計算が必要となる。

この手の事やりかたかったら canvas や svg 使った方が楽。

PR

コメント

ただいまコメントを受けつけておりません。

ブログ内検索

P R