たかし@tak4: 前述の画像では見やすさのために512pxのcanvasに大きめに描画したけど、小さいcanvasをcssのtransformで拡大した方が効率が良いらしいのでさうする。js側の座標の計算が少しシンプルになった。canvasを使っても見た目の調整はcssの役割なんだね。

Home | Notifications | New Note | Local | Federated | Search | Logout

Note Detail

たかし@tak4 (2026-01-30 01:16:13)
jsのstring型でドット絵を表現しました。string型の配列を作り、その場でjoinして1つの文字列にする。横幅は16ドットと決めてある。

const fish = ([
"0000000000000000",
"0000000111111100",
"1100011111111111",
"0110111111110110",
"1111111111111100",
"0110111111111110",
"1100011111111111",
"0000000111111100"
].join(""));

↓16×8のドット絵を作り、縦に2倍にして表示。

https://pixelfed-tokyo.sgp1.digitaloceanspaces.com/public/m/_v2/913455706248965777/ffe7c43a6-a8b5f2/f9GzUPDuFdnL/ZURZjvEw2LRyQgF0BW2f7mvVV9gwzBAh40ggNfe1.png
---Reply---
たかし@tak4 (2026-01-30 01:53:40)
前述の画像では見やすさのために512pxのcanvasに大きめに描画したけど、小さいcanvasをcssのtransformで拡大した方が効率が良いらしいのでさうする。js側の座標の計算が少しシンプルになった。canvasを使っても見た目の調整はcssの役割なんだね。