Archived entries for HTML5

Study HTML5 & JavaScript (4) – Draw App (1)

JavaScript+HTML5 Study Book

DrawApp_01

久々に本からJavaScriptとHTML5のお勉強です。

マウスで線を描く、らくがきアプリの制作を学習しました。

 

↓できたもの。

http://shokolog.com/study/draw

(とりあえずマウスイベントしか拾っていないので、タッチイベントは不可)

 

マウスお絵描きのコード自体はそんなに難しくないので、

マウスの動きにあわせて線が引ける仕組みだけ分かればいい感じです。

DrawApp_02

学習した内容は以下。

・マウスで線を描く

onMouseDown = “関数名(event)”

onMouseDownイベント(マウスボタンが押されたら関数〇〇を実行する)

ex.) <canvas id=”main” width=”640″ height=”480″ onMouseDown=”startDraw(event)”></canvas>

onMouseMove = “関数名(event)”

onMouseMoveイベント(マウスボタンが移動したら関数〇〇を実行する)

ex.) <canvas id=”main” width=”640″ height=”480″  onMouseMove=”draw(event)”></canvas>

onMouseUp = “関数名(event)”

onMouseUpイベント(マウスボタンが離されたとき関数〇〇を実行する)

ex.) <canvas id=”main” width=”640″ height=”480″ onMouseUp=”endDraw(event)”></canvas>

※eventオブジェクトは、 イベントが発生したときのマウスカーソルの位置やイベントの種類などが格納されている

 rgba(赤成分、緑成分、青成分、透明度)

色・透明度の指定

赤成分、緑成分、青成分は、0~255の値をとる

透明度は、0~1の値をとる(0:透明、1:不透明)

event.clientX

ウィンドウ(ブラウザー)上のX座標

event.clientY

ウィンドウ(ブラウザー)上のY座標

※マウス座標の取得はブラウザごとに異なっているので注意

※firefox以外のブラウザーでは、

event.offsetX, event.offsetY(イベントが発生した要素上のX,Y座標)で

キャンパス上の正確な座標を取得できる

コンテキスト.lineWidth

線の太さの指定

コンテキスト.lineCap

線の両端の形の指定

round:円

butt:ぶつ切り

square:四角形

 

らくがきアプリのコードはこれだけです。

そのままコピペすれば、使えます。


<!DOCTYPE html>
 <html>
 <head>
 <meta charset="Shift_JIS">
 <title>らくがき帳</title>

<script>

//マウスが押されているかどうか調べる変数を宣言
 var mouseDown = false;

//ペンの設定
 var penX = 0;
 var penY = 0;
 var penColor = "rgba(0,0,0,1)";
 var penWidth = 10;

//描画の開始
 function startDraw(event){

//マウスボタンが押された
 mouseDown = true;

//ペンの座標をセット
 penX = event.clientX;
 penY = event.clientY;

}
 //描画
 function draw(event){

//マウスボタンが押されていれば描画
 if (mouseDown){

//キャンバスの取得
 var canvas = document.getElementById("main");

//コンテキストの取得
 var context = canvas.getContext("2d");

//ペンのセット
 context.strokeStyle = penColor;
 context.lineWidth = penWidth;
 context.lineCap = "round";

//マウスカーソルの座標を取得
 var x = event.clientX;
 var y = event.clientY;

//パスの開始
 context.beginPath();

//座標の移動
 context.moveTo(penX,penY);

//線の描画
 context.lineTo(x,y);

//パスの描画
 context.stroke();

//ペン座標の切替
 penX = x;
 penY = y;

}

}

//描画の終了
 function endDraw(event){

//マウスボタンが離された
 mouseDown = false;

}

</script>
 <style>
 canvas{
 border:solid #999999 1px;
 }
 </style>

</head>

<body>
 <canvas id="main" width="640" height="480"
 onMouseDown="startDraw(event)"
 onMouseMove="draw(event)"
 onMouseUp="endDraw(event)"></canvas>

</body>
</html>

Study HTML5 & JavaScript (3) – Canvas

JavaScript+HTML5 Study Book

HTML5の新しい機能、canvas!

canvasタグ内で、いろいろ描画できるというやつです。

processingを思い出します。

 

canvasではないけれど、

そういえば、昨年教えてもらったJavaScriptのみで描かれたサイト。

WebGLShaderLab

http://www.cake23.de/traveling-wavefronts-lit-up.html

(Google Chromeでしか見れません)

綺麗すぎて悶絶するけど、ソースを見ると鬼!!!

コードだけでこんなにも有機的な表現ができるなんて、感動です。

 

以下、学習内容です。

・キャンバスの制作

<canvas id=”ID” width=”幅” height=”高さ”></canvas>

グラフィックスを描画する領域

指定したサイズ(幅×高さ)の透明なキャンバスがページ内に作成される

var canvas(変数) = document.getElementById(“main(ID)”);

var context(変数) = canvas.getContext(“2d”);

キャンバスの取得、コンテクストの取得

キャンバスを使用する際に必ず記述するコード(決まり文句として覚える)

 

・四角形の描画

コンテキスト.strokeStyle

線の色の設定

コンテキスト.strokeRect(x,y,w,h)

四角形(輪郭のみ)の描画

x: 四角形の左上の頂点のx座標

y:四角形の左上の頂点のy座標

w:四角形の幅

h: 四角形の高さ

コンテキスト.fillStyle

塗りつぶし色の設定

コンテキスト.fillRect(x,y,w,h)

四角形(塗りつぶし)の描画

 

・線の描画

コンテキスト.beginPath()

パスの開始

コンテキスト.moveTo(x,y)

始点の移動

コンテキスト.lineTo(x,y)

線の作成(指定の座標まで線を引く)

コンテキスト.closePath()

パスを閉じる

コンテキスト.stroke()

パスの描画

 

・円、弧の描画

コンテキスト.arc(x,y,radius,startAngle, endAngle, anticlockwise)

円・弧の作成

x:円の中心のx座標

y:円の中心のy座標

radius:円の半径

startAngle:開始角度(ラジアンで指定)

endAngle:終了角度(ラジアンで指定)

anticlockwise:描画方向(反時計回りはtrue、時計回りはfalseを指定)

JavaScriptでは π (ラジアン) = Math.Pl と記述

ex.) 360°=2π = 2*Math.Pl /  45° = 2*Math.Pl*(45/360)

コンテキスト.fill()

パスで囲まれた領域を塗りつぶす

塗りつぶしの色は、fillStyleで指定した色になる

 

・曲線の描画

quadraticCurveTo(cp1x, cp1y,x,y)

2次ベジェ曲線を描画

bezierCurveTo(cp1x, cp1y,cp2x,cp2y, x,y)

3次ベジェ曲線を描画

arcTo(x1,y1,x2,y2,radius)

直線に接する弧を描画

 

 

Study HTML5 & JavaScript (2) – Slide Show App

JavaScript+HTML5 Study Book

Slide Show

本日もJavaScriptとHTML5のお勉強です。

今日は、「スライドショー」Appをコンプリートしました。

再生ボタンを押すと、

壮大なクラシック音楽が流れながら画像が見れる、

と結構シュールなサンプルでした。

サンプルそのままの素材とGUIなので、オシャな感じではないですが、

まず先にコードを書いて覚える、ということを重きに学習しました。

 

昨日からやたらと書いていて

document.getElementById(“IDの名前〇〇”); //指定IDの取得

が出てくるので要注意です。

JavaScriptからHTML5のIDを読み取る、

という両コードの橋渡し的な役割なのでよく出てくるようです。


以下、学習内容とメモです。

・サムネイル画像をクリックすると画像が表示されるビューアーの作成

function 関数名 (imageNo){
}

引数imageNoに、表示したい画像番号を渡す

document.getElementById(“ID名〇〇”).src = 配列名〇〇[imageNo];

メイン画像の切替

(指定IDのsrcにアクセスし、配列に入れておいた画像を呼び出して表示)

配列 = document.getElementByClassName(“クラス名〇〇”)

クラス名〇〇を元にエレメントを取得(全てのサムネール画像要素の取得)

DOM要素.classList.remove(“取り除くクラス名〇〇”)

slectクラスを削除する

DOM要素.classList.add(“追加するクラス名〇〇”)

slectクラスを追加する(選択されたサムネール画像にslectクラスを追加)

onClick = “・・・”

マウスが押されたら関数〇〇を実行する

 

・スライドショー(タイマーを使って画像を順に切替)

<button type=”button”>

 ボタンに表示するラベル

</button>

ボタンの作成(<imput>タグでもボタンはつくれるが、<button>方が

ボタンのテキストを複雑に変更できたり画像を貼り付けたりできる)

clearInterval(タイマー変数名)

インターバルタイマーをクリアする(setInterval関数で開始したタイマーは、

生成されたタイマー変数をclearInterval関数に渡して止めることが出来る)

 

・音楽データの再生・一時停止・停止

<audio src=”音楽データファイル” controls autoplay loop></audio>

src : 再生する音楽データファイルを指定

controls : 再生/一時停止、ボリュームなどを操作するコントロールバーが表示

autoplay : ページを開いたときに自動的に再生を開始

loop : 繰り返し再生

<audio controls autoplay loop>

<source src=”音楽データファイル1″></source>

<source src=”音楽データファイル2″></source>

<source src=”音楽データファイルn”></source>

</audio>

*再生できるファイル形式がwebブラウザーによって異なるので、

AUDIOタグだけでは全ての環境に対応することが出来ない

よって、複数のファイル形式を記述できるSOURCEタグも一緒に書く

要素.play()

音楽・動画データの再生

要素.pause()

音楽・動画データの一時停止

要素.load()

音楽・動画データの再読み込み / 音楽・動画データの停止

 

・スライダーバーによる音楽ボリュームの変更

<input type=”range” id=”ID” value=”初期値” min=”最小値” max=”最大値” step=”間隔”> 

レンジ入力欄(スライダーバー)の作成

id : 要素を特定するためのIDを指定

value : 初期値の指定

min : 最小値の指定(省略時は0)

max : 最大値の指定(省略時は100)

step : 数値の間隔を指定(省略時は1)

*現在、Chrome、Safari、Operaブラウザーに対応

要素.volume

ボリュームの変更

onChange = “・・・”

スライダーが変化したときに発生するイベント

disabledプロパティ

一度だけしか押せないボタン作成時に使用

ex.) document.getElementById(“buttonStart”).disabled = true;

(ボタンの無効化 true)

「ボタンがクリックされた時」に実行すると「1度しか押せないボタン」になる

ex.) document.getElementById(“buttonStart”).disabled = false;

(ボタンの有効化 false)

無効にしたボタンを再度クリック可能にする

1回勉強したら 絶対に忘れない脳みそがほしいです。

Study HTML5 & JavaScript (1) – World Clock App

JavaScript+HTML5 Study Book

もっと武器を持つために、HTML5とJavaScriptの勉強をしています。

Web のコードがだいたい書けるようになったので、

今度はWeb Appが作れるようになるよう訓練です。

 

『つくって覚えるJavaScript+HTML5入門』 

出版社 : アスキー・メディアワークス

オフィス加減 (著)

 

Web Appに特化した本 & とにかく書いて書いてつくっていく、

という内容だったので、この本にしました。

 

World Clock

今日は「世界時計」Appをコンプリートしました。

学習した内容を忘れないように、以下メモです。

・現在の時刻(時間、分、秒)の取得

new Date()

現在の日時を取り出すメソッド

getHours()

時間を取り出すメソッド 0~23の値を返す

getMinites()

分を取り出すメソッド 0~59の値を返す

getSeconds()

秒を取り出すメソッド 0~59の値を返す

DOM要素 = document.getElementById(“〇〇”); 

HTML ID「〇〇」のDIVタグを取り出すメソッド

DOM要素.innerHTML = 書き換えたい文字列;

HTML ID「〇〇」のDIVタグの中に書き込むメソッド

onLoad = “関数〇〇”

ページ読み込み時に関数〇〇を実行するメソッド

 

・現在の日付(年、月、日、曜日)の取得

getFullYear()

年を取り出すメソッド 4桁の年を返す

getMonth() 

月を取り出すメソッド 0~11の値を返す

(12月にするためには+1を忘れずに)

getDate()

日を取り出すメソッド  1~31の値を返す

getDate()

曜日を取り出すメソッド 0~6の値を返す

(0は日曜日、6は土曜日に相当)

var 配列名 = [要素1, 要素2,・・・, 要素n];

配列に要素を格納するメソッド

配列名[インデックス]

配列に〇〇メソッドを渡すメソッド

 

・時間の経過によって時刻が変化(タイマーの使用)

setTimeout (関数, 待機時間) / setInterval(関数, 繰り返し時間)

関数を待機時間ごとに繰り返すメソッド

 

・プルダウンリストの作成

<select id = “ID”>

<option value = “値1″> ラベル1

<option value = “値2″ selected> ラベル2

<option value = “値n” > ラベルn

</select>

slected は初期値

 

・世界各国の都市の日時を取得

getTime()

1970年1月1日午前0時から、現在までの経過ミリ秒を参照するメソッド

selectedIndex 

フォームの選択メニューで選択されている項目の参照番号を返すメソッド

select要素.options[選択されたインデックス].value

optionタグのvalue属性の値を取り出すメソッド

 

淡々とこなしていこうと思います。

 



Copyright © 2011 Shoko Tanaka. All rights reserved.

RSS Feed.