canvas練習:カウントダウン

投稿者: | 2011 年 8 月 11 日

3分間をカウントダウンするもの。元々デジタル表示式で作ってたのをcanvas利用のアナログ表示にリメイクしてみた。
見た目をアナログにしたくて、何で実現するかちょいちょい調べたりしてたもの。
canvas+javascriptで簡単にやれそうだったのでちょっと勉強がてらやってみたもの。
一応動くようになったのと、コード公開できるサービス:jsdo.itをたまたまみっけたので載せてみる。

CountDownTimer – jsdo.it – share JavaScript, HTML5 and CSS

どうでもいいようなとこでハマったのでメモ。

デジタル、アナログそれぞれ単品ではうまく動いてたのが、両方を合わせるとだめだった。
→firebugでみると「ctx が undefined」 みたいなエラー。

変数名がかぶってるわけでもないし、スコープおかしいとかいうわけでもなく。
意味不明。

3日ほど(実質4時間くらい?)ハマって今日気づいたのは、
javascriptのコメント文を消すとエラーになったり、戻すとOKになってたり。
jsファイルは全部UTF-8にしてても、HTMLファイルにそのへん無記述だとロードしたときにブラウザ側(firefox)が辺に解釈しちゃって、変数宣言部分がカットされちゃってた??

→ metaタグでHTMLの文字コードちゃんと明記してやったら問題無しだった。
ちゃんと書かないとだめなんですね。
(上に見えてるコード上はヘッダ部分無いけど、ローカルのファイルには書いてある)

こんなやつね。

<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-script-type" content="text/javascript" />

いろいろ勉強になりました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です