repeating-linear-gradientでレーン分割線を書く.css
2024-07-25
https://scrapbox.io/files/66a1f596b9ef30001c3265a9.png
↑これはこのページに書かれてる内容を実装したあとのプレイ画面をスクショしたもの
ノーツが流れてくる部分は全体が1つのcanvasになっているんですが、レーン分割線をcanvas側で描画するのがだるいのでCSSでなんとかしたくて…… 格子とかスプライトとかをつくることを想定しているらしいが、レーン分割線も極端に見ればスプライトなので書けるやろって話
code:main.css
div#session {
︙
&>canvas {
︙
/* == レーン線をCSSで == */
background-image: repeating-linear-gradient(to right,
rgb(from var(--text) r g b / .5) 0px,
rgb(from var(--text) r g b / .5) .5px,
transparent .5px,
transparent calc(calc(100% / 6) - .5px),
rgb(from var(--text) r g b / .5) calc(calc(100% / 6) - .5px),
rgb(from var(--text) r g b / .5) calc(calc(100% / 6)));
}
︙
}
※ var(--text)はoklch(from #93dc9e 80% 0.01 h)