Please Sleep

From notes on my laptop

17 Jan 2010

html5-developers-jp の ハンズオンセミナーに行ってきました

html5-developers-jp主催のハンズオンセミナーに行ってきました. 内容はcanvas要素のイントロダクションです. とても丁寧に説明していただいたので, ちょっとでもjsを書いたことがある人なら誰でも理解できると思います.

Error 404 (Not Found)!!1

羽田野さん

canvasのsetTransformメソッドについての解説です. setTransformは画像に移動・スケーリング・傾斜の変換をかけることができます.

Error 403 Forbidden

題材はこちらのanimation demoです.

html
<input type="range" name="fps" id="fps" min="1" max="120" step="1" value="60" />
<output for="fps" onformchange="value = form.elements.fps.value">output> fps

onformchange イベントハンドラ. フォームの値が変わると呼ばれる. html5仕様.

output要素. jsで値を入れることを想定した要素. html5仕様.

 <p><canvas id="canvas" width="300" height="300">canvas>p>
js

初期化処理

var img = new Image();
img.src = "futomi.jpg";
// ...

window.addEventListener("load", function() {
     // contextを取得
     ctx = document.getElementById("canvas").getContext('2d');
     // imgを座標(0, 0)に描画
     ctx.drawImage(img, 0, 0);
     btn = document.getElementById("btn");
     btn.addEventListener("click", toggle, false);
     // width, height, centerを取得
     cw = parseInt(canvas.width);
     ch = parseInt(canvas.height);
     cc = cw / 2;
}, false);

ボタンを押してムービーをスタート・ストップ

function toggle() {
if( moving == true ) {
moving = false;
btn.value = "start";
} else {
moving = true;
move();
btn.value = "stop";
}
}

ムービー

function move() {
  // transform を初期化
ctx.setTransform(1, 0, 0, 1, 0, 0);
  // canvasの画像をクリア. cw*3, ch*3 は transform によってはみでた部分を消している
  // クリアすると透明な黒色になる. background-colorが透過して表示される.
ctx.clearRect(-cw, -ch, cw*3, ch*3);
  // 回転角, 画像の横位置を計算
var m11 = Math.cos( deg * Math.PI / 180 );
var dx = ( cw / 2 ) - ( cw * m11 / 2 );
  // transform して描画
ctx.setTransform(m11, 0, 0, 1, dx, 0);
ctx.drawImage(img, 0, 0);
  // 角度を更新
deg ++;
deg = deg % 360;
  // setTimeoutでfpsに応じて自分を呼び出し
var fps = get_value("fps");
fps = parseInt(fps);
if( fps <= 0 ) { fps = 1; }
if( moving == true ) {
setTimeout( move, parseInt( 1000 / fps ) );
}
}
その他の変形メソッド

Canvasリファレンス - HTML5.JP

  • rotate()
    • 回転
  • scale()
    • 拡大縮小
  • setTransform()
    • アフィン変換
  • translate()
    • 平行移動
  • transform()
    • 変換行列で変換

白石さん

画像がフェードイン・アウトするサンプルです. 題材はこちら

フェード効果のサンプル

html

<html lang=ja>
<head>
<meta charset=UTF-8>
<meta http-equiv=X-UA-Compatible content="chrome=1"> 
<title>フェード効果のサンプルtitle>
head>
<body onload="init()">
<h1>フェードアニメーションのサンプルh1>
<canvas id=canvas width=300 height=300>canvas><br>
<button onclick="fadeIn()">フェードインbutton>
<label for=alphaBar>透明度:label>
<input id=alphaBar type=range step=0.1 value=1 max=1 min=0 onchange="changeAlpha()">
<button onclick="fadeOut()">フェードアウトbutton>

ダブルクオーテーションの省略などhtml5ナイズされています.

js