Canvasによるデジタル時計制作入門

Canvas入門02
Canvasによるデジタル時計制作

Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights 2
Canvasで
デジタル時計

Copyright Ⓒ Yoshihiro Takahashi 2009 All Rights Reserved. 3
今回の講義内容
• Canvas文字表示を利用して、デジタル時
計を作成
– Canvasによるアニメーションの設定
• setIntervalとCanvas独特のアニメーション設定
– デジタル時計
• Dateオブジェクトによる日時表示
– JS制御文の活用
• 関数や配列などのJSの構文と組み合わせる

デジタル時計を作りながら
Canvasアニメーションを
学習していこう

まずは
文字表示

• 文字表示
– フォント指定
コンテキスト.font = ‘スタイルサイズファミリー名’;
記述例：‘bold 20px sans-serif’
– 文字の縁線を描画
コンテキスト.strokeText( 文字, 横位置, 縦位置);
– 文字の塗りつぶし
コンテキスト.fillText( 文字, 横位置, 縦位置);
canvas要素に文字を表示しよう

Canvas
アニメーション

• Canvas図形をJavaScriptで動かそう
• 大切なポイント
– 最初に日本語で動き（仕組み）を考えて、その動きを
JavaScriptで翻訳し記述する
・・・という流れです。
そのため、日本語で仕組みを正しく考えられれば、6
割～7割程度の作業は完了したことと同じになります。

プログラミングの
ポイント

©2014 Yoshihiro Takahashi All Right Reserved. 10
• 英語（外国語）を学習するイメージ
→ つまり理系じゃなくても大丈夫！！
• 英単語の覚える ⇒ 命令などを覚える
• 文法を理解する ⇒ 条件分岐文、繰り返し文
– ただし、理解するためには多くの時間がかかります
• 初めての内容を学習するので、分からないことが多い
– 何度も復習をして、理解を深めてください。
– 英語などの言語も一回では覚えられないのと同じです。
• コンピュータに的確に意思を伝えることが重要
– プログラミング的思考
JS（プログラム言語）を学習するための心構え

©2014 Yoshihiro Takahashi All Right Reserved. 11
プログラミング的思考
• 繰り返し文（ループ文）
– 数ミリ秒間隔に繰り返す
– ？回作業を繰り返す
• 条件分岐文
– if文
• もし ○○の値が△△だったら

プログラミングのポイント
• 考え方の基本は、
【いつ】 + 【どこ/誰】 + 【どうする】

皆さん、来週一緒にランチしましょう

皆さん、来週一緒にランチしましょう
誰いつどうする

文字

文字右に動け！！

• 【いつ】 + 【どこの/誰】 + 【どうする】
– 数ミリ秒間隔のタイミングで（いつ）
– canvas文字（どこ/誰）
– X座標を変更（どうする）

• 数ミリ秒間隔のタイミングで
– 指定した値のミリ秒間隔で連続で実行
– 「何か」を繰り返し実行し続けたい場合に利用
– 「setInterval」というイベントを使います。
• 設定方法
setInterval(function(){
繰り返しやりたい事；
}, ミリ秒);
即時関数での実行
setInterval(関数名, ミリ秒);
function 関数名(){
繰り返しやりたい事；
}
関数定義での実行

Canvas(ブラウザ)の動きの考え方
Canvas
０
Ｙ
X
右に動かす＝ X座標の値を増やす
下に動かす＝ Y座標の値を増やす

• 文字表示
コンテキスト. fillText( 文字, 横位置, 縦位置);
canvas要素に文字を移動しよう

• 文字表示
この数値を変更する

• 文字表示
setInterval(function(){
ctx.fillText( ‘文字’, 100, 100);
}, 30);

あれ、
動かない？

• この記述だと、100を何度も設定している
• 数値を定期的に変更する必要がある
100→101→102→103→104・・・
setInterval(function (){
ctx. fillText( ‘文字’, 100, 100);
}, 30);

26
数値を
変更したい
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.

変数

変数について
• 変数とは
– 値を入れるための「入れ物」
– 値（数字など）を変化させたい場合に使用する
– 「 var 変数」で、変数の宣言（作成）
– 「変数＝値」で、変数に値を代入
• 記述例
var 変数 = 値 ;
var 変数 = ‘文字’ ; // 文字はシングルクォート ‘’ で囲む
var 変数 = 値, 変数 = ‘文字’； // カンマ, で複数宣言

ポイント
= 値
代入
「＝」は、代入という意味です。
「＝」の左側は「入れ物」、「＝」の右側は「値」となります
数学の X=Y とは違います
XとYが等しいというイメージを捨てましょう
入れ物

ここで問題・・・
残像が残る

canvasアニメーションの
基本

Canvasアニメーションの基本
更新
クリア
描画

• 矩形
– 塗られた矩形を描く
コンテキスト. fillRect(x, y, width, height)
– 矩形の輪郭を描く
コンテキスト. strokeRect(x, y, width, height)
– 指定された領域を消去
コンテキスト. clearRect(x, y, width, height)
canvas要素に図形を描画しよう

今の
問題点は？

現状の問題点
• 右に行きっぱなし
文字

現状の問題点
• 右に行ったら、左に戻したい
文字文字

条件によって
処理を変えたい

条件分岐
if

条件分岐（if文）
if (条件式１) {
実行したい処理；
}
else if (条件式２) {
}
else{
}

if (条件式１) {
}
else if (条件式２) {
}
else{
}
条件式１が成立したとき、
｛｝の中を実行する
条件式１が成立せず、
条件式２が成立したとき、
｛｝の中を実行する
条件式１と条件式２が
成立しないとき、｛｝の
中を実行する

条件式の設定方法
• 比較演算子
A == B （等しい）
A > B （より大きい）
A < B （より小さい）
A >= B （以上）
A <= B （以下）
A != B （等しくない）

if (パソコンの価格＜５万円) {
パソコンを購入；
}
else{//条件を満たしていないとき
お店から出る；
}
• 普段からifは使っています

簡単なデジタル時計を
作成してみよう

時計を制作するには、PCから日時を
取得する必要があります。
日時を取得するJavaScriptの命令は・・・。

Dateオブジェクト
日時取得の命令

Dateオブジェクトとは
• 日付や時刻をしらべることができる。
• 使用方法
– Date.メソッド()
– Date.プロパティ

日時の取得例
var now = new Date();
var hour = now.getHours();
console.log(hour);
実際に入力して、確認してみよう

Date()の内容
• Dateオブジェクトを生成
– var now = new Date(); //Dateオブジェクト生成
– var hour = now.getHours(); //時の取得
• 主に取得できるデータ
– getDate()：日にちを参照する
– getDay()：曜日を参照する（0～6、日曜～土曜）
– getFullYear()：4桁の西暦年を参照する
– getHours()：現在の時を参照する
– getMilliseconds()：ミリ秒（1000=1秒）を参照する
– getMinutes()：分を参照する
– getMonth()：月を参照する（0～11、1月～12月）
– getSeconds()：秒を参照する

課題
• 時刻を表示してみよう
– 年・月・日・曜日を「/」で、文字連結
時・分・秒の値と「：」を文字連結して表示し
よう
2012/８/16/日
１６：３５：５７

デジタル時計
• 現在の問題点
?

デジタル時計
• 時間を動かしたい
アニメーションしよう

デジタル時計
• 現在の問題点
?

デジタル時計の特徴
• ゼロの表示
– 0～9までは１桁なので、表示が変になる
• 14：1：5
• 12：13：45
• 1：5：7
• 2008/1/5
• 2007/12/25
– 年を除く各項目の値が0～9の時は前に０を追加
• 14：01：05
• 12：13：45
• 01：05：07
• 2008/01/05
• 2007/12/25

• 年を除く各項目の値が0～9の時は、数字
の前に０を追加してみよう。
– if文を使うと簡単です。

• 年を除く各項目の値が0～9の時は、数字
の前に０を追加してみよう。
– if文を使うと簡単です。
– でも、月，日，時，分，秒の5つも似たよう
な処理を書くのは面倒・・・

課題
• 各項目の値が0～9の時は、数字の前に０
を追加してみよう・・・Part 2
– 関数を作成して、1つの処理にまとめましょう。
• 関数の内容は、先ほど説明したif文です。
– 関数は、「作ること」と「使うこと」は別に
なりますので、注意してください。

function：処理をまとめる
• ユーザーが事前に設定できる、命令文です。
実行処理の再利用、一元管理するのに有効です。
関数は、「作ること」と「使うこと」は別になりますので、
勘違いしないよう気をつけてください。
function 関数名(引数1,引数2,・・){
・・・
return 戻り値;
}

もう少し高速動作
を意識する
学習のためにifとfunctionを確認しました

デジタル時計の桁調整
• sliceによる文字の切り取り
– sliceの使用例 → 文字.slice(開始位置)
var a = 123456789;
a.slice(3); → 3456789
a.slice(-2); → 89
– 日時の場合
var hour = now.getHours();
( ‘0’ + hour).slice(-2);
// hourが5の場合05、25の場合025→25

曜日を簡単に
表示する

曜日を簡単に表示する
• ifの場合 → 記述が長い
var day = now.getDay();
if(day == 0){
//日曜表示
}else if(day == 1){
//月曜表示
} else if(day == 2){
//火曜表示
}
・・・・・

そこで配列！！

曜日を簡単に表示する
• 配列を利用
– CDケースみたいなもの・・・です。

配列
• オブジェクトを作成します。
var a = new Array();
例 a[0] = 100;
a[1] = 200;
a[2] = 300;

配列の特徴
• []の中に変数が使える
a[ 変数 ]

配列
• 記述例
var a = new Array();
a[0] = ‘ABC’;
a[1] = ‘DEF’;
a[2] = ‘GHI’;
var a = new Array(‘ABC’, ‘DEF’, ‘GHI’);

続きは、
Canvas入門03
アナログ時計作成へ・・・

Canvasによるデジタル時計制作入門

Recommended

Recommended

More Related Content

Similar to Canvasによるデジタル時計制作入門

Similar to Canvasによるデジタル時計制作入門 (20)

More from Yossy Taka

More from Yossy Taka (14)

Recently uploaded

Recently uploaded (12)

Canvasによるデジタル時計制作入門