mieki256's diary

HTML5のcanvasについて勉強中。数日分 x 24時間のグリッドを描画して、その上に、作業時間帯のようなものを描画したい。

大昔、CGIで画像を表示しようとしたら、サーバ側で画像を生成してソレをWebブラウザに表示させるのが一般的だったと思うのだけど。今時はWebブラウザ上で、HTML5 + JavaScript を使えばグラフィック描画ができるわけで、だったらサーバ側で画像を生成せずに、Webブラウザ上で描画させたほうがいいんじゃないかなと思い立った。そのためには、canvas の使い方を勉強しないと…。

ひとまず、文字描画と直線描画を試しているところ。以下が参考になった。

_【canvas入門】canvas要素にテキストを描画しよう!スタイル設定方法も紹介! : ビジネスとIT活用に役立つ情報(株式会社アーティス)
_HTML5 Canvas でテキストを描画する - まくまくJavaScriptノート
_Canvasで色々な直線を引いてみよう!【おまけつきだ・・・っ!】 #JavaScript - Qiita
_canvas要素にパス(直線)を描画する | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website

日付も描画しないといけない。「2024/06/26」みたいな感じで描画したい。

_【JavaScript入門】日付の加算・減算方法まとめ(月またぎ/うるう年) | 侍エンジニアブログ
_【JavaScript】日付処理 #JavaScript - Qiita
_【JavaScript】toLocaleDateStringで日付フォーマット - #JavaScript - Qiita
_ホームページ - EY-Office

new Date()、getDate()、setDate()、toLocaleDateString() を使えばいいのかな。