Graphics(SVG)を用いて、「タイマー」を作りました。長方形(バー)が縮むことで、時間経過が見えるタイマーです。記事「1分タイマーの作り方2」では、Canvasを使いましたが、今回はSVGを使います。Graphics)SVGプログラミングの詳細は、前回記事「SVGで長方形を描く」をご参照ください。以前、記事「1分タイマーの作り方」で、1分のカウントダウンタイマーをプログラミングしました。記事「SVGで長方形を描く」で、長方形の描画と移動をプログラミングしました。今回は、上記2つのプログラムを組み合わせることで、長方形の長さ変化により時間経過が見えるタイマーを作ります。長方形の描画・変形(注)タイマー部やバー描画部の詳しい説明は、上記2つの記事をご覧ください。1分タイマーのタイマー部プログラム(タイマー部)タイマーに関する行を、マーカー表示しました。function)です。function()この関数に、オンロード直後に実行するプログラムを記述します。上記プログラムの35行目で、タイマーを設定しています。interval);1秒間隔で、Rectangle()関数を呼び出します。36行目で、変数timeに値60を代入しています。set_time;(注)setInterval関数の詳しい説明は、記事「1分タイマーの作り方」をご参照ください。Rectangle()22行目で、変数timeから1引いています。time--;Rectangle()関数は、1秒に一回動きます。Rectangle()関数が動いたときは、前回動いたときより1秒経過しています。24行目から26行目で、タイマーを消去しています。clearInterval(timer_id);}変数timeの値が「0」ならば、タイマーを消去します。1分タイマーのバー描画部プログラム(バー描画部)プログラムの内容は、プログラム(タイマー部)と同じです。バーの描画に関する行を、マーカー表示しました。function()33行目で、変数svgRectに、rect要素を代入しています。document.getElementById("rect");Rectangle()23行目で、バーの長さを「1秒分」縮めています。w*(time/set_time));setAttributeメソッドを用いて、width属性を書き換えています。13行目、16行目より、wが300、set_timeが60なので、w*(time/set_time)の値は以下となります。コメントをキャンセルメールアドレスが公開されることはありません。高齢者が使用するラジオを購入しました。カメラにはピントが合う範囲があります。ページ上にJavaScriptを用いて点を描画します。ここでも、やはり、Canvasを使用します。「PhpSpreadsheet」というPHP対応のExcel操作ライブラリを利用しました。カメラの「絞り」により、ピント合わせに限界が生じます。ページを開けると、1分のカウントダウンが始まる、1分タイマーを作ります。プログラムで判別します。デジタルカメラには撮像素子が使われています。撮像素子は長方形で、大きさは縦3.6cm、横2.4cm程度です。写真を撮るとき、被写体にカメラを向けてピントを合わせます。ライセンスの下に提供されています。WordPress.コメントを読み込み中...コメントをどうぞメール名前サイト。