mieki256's diary



2024/06/26(水) [n年前の日記]

#1 [javascript] HTML5のcanvasについて勉強中

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() を使えばいいのかな。

以上です。

過去ログ表示

Prev - 2024/06 - Next
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

カテゴリで表示

検索機能は Namazu for hns で提供されています。(詳細指定/ヘルプ


注意: 現在使用の日記自動生成システムは Version 2.19.6 です。
公開されている日記自動生成システムは Version 2.19.5 です。

Powered by hns-2.19.6, HyperNikkiSystem Project