HTML5 / Canvas 画像読み込み

Canvasに画像を読み込みます。
前回はただの四角だったものを画像に。

1
2
var image = new Image();
image.src = 'xxx.png';

これで画像は読み込めます。
画像のサイズは image.width, image.height の様に取得可能。
なので、前回の移動距離の計算や、画面からはみ出ないようにする処理をこの画像のサイズを使って判定するようにしてみました。

サンプル

jQueryゼロから / slideUp, slideDown (クリックで開いたり閉じたり)

ちょっとアニメーションぽい事を。
使いすぎるとウザイ、SlideUpとSlideDown。

1
2
<span id="slide">ここをクリック</span>
<p id="target" style="display: none;">なんか表示</p>

マウスクリックで閉じたり開いたりします。
jQuery ではアニメーションの速度を “slow”, “normal”, “fast” で指定できます。

1
2
3
4
5
6
7
$('#slide').click(function(){
    if ($('#target').css('display') == 'none') {
        $('#target').slideDown('slow');
    } else {
        $('#target').slideUp('fast');
    }
});

$(‘#target’).css(‘display’) でスタイルシートの display の状態を取得して、それにより処理を if 〜 else 文で分岐しています。

サンプル

2011.07.10 追記
単に開いたり閉じたりするなら slideToggle 使うと楽です。
jQueryゼロから / toggleSlide

jQueryゼロから / show, hide (マウスオーバーで表示・非表示を切り替える)

エフェクトの基本、show(), hide() やってみる。
マウスオーバー、マウスアウトで表示を切り替えてみます。

1
2
3
4
<span id="target">
    <span id="on" style="display: none;">マウスオーバー</span>
    <span id="off">マウスアウト</span>
</span>

こんな感じでマウスオーバー時のデータを非表示にしておいて、下記のようにして切り替えます。

1
2
3
4
5
6
7
$('#target').mouseover(function(){
    $('#off').hide();
    $('#on').show();
}).mouseout(function(){
    $('#on').hide();
    $('#off').show();
});

jQuery は $(‘#target’).mouseover().mouseout(); の様にドットで処理を連続して書けるのが便利です。

サンプル

2011.01.28 追記
mouseover / mouseout より hover (mouseenter / mouseleave) の方が余計なイベントが発生しないのでおすすめです。
hover については上記サンプルと下記に補足しました。
jQueryゼロから / hover (オンマウスでアニメーション)

HTML5 / Canvas アニメーション

Canvasで30fpsとかで描画するので setInterval 使って定期的に処理。

1
2
var fps = 30; // 秒30フレーム
setInterval(draw, 1000 / fps);

まずは四角でも描画してみます。

1
2
3
4
5
6
7
var canvas = document.getElementById('canvasId');
var context = canvas.getContext('2d');
setInterval(function(){
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = '#FF0000';
context.fillRect(0, 0, 32, 32);
}, 1000 / fps);

なんか動きをつけたいので、ボタンクリックで動かすことにします。
ついでに諸々ちょっと整理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
var canvasAnimation = function(canvasId){
this.fps = 30;
this.color = '#FF0000';
// 四角の位置(初期値 0, 0)
this.x = 0;
this.y = 0;
// 四角のサイズ
this.cell = 32;
// 初期化処理の呼び出し
this.init(canvasId);
};
canvasAnimation.prototype = {
// 初期化処理
init: function(canvasId){
var self = this;
self.canvas = document.getElementById(canvasId);
self.context = self.canvas.getContext('2d');
setInterval(function(){
self.draw();
}, 1000 / self.fps);
},
// 描画処理
draw: function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.context.fillStyle = this.color;
this.context.fillRect(this.x, this.y, this.cell, this.cell);
},
// 四角形の位置更新
update: function(dx, dy){
var x = this.x + this.cell * dx;
var y = this.y + this.cell * dy;
// 四角形がCanvasからはみ出ない様にする
if (x &lt; 0 || y &lt; 0 || x &gt; this.canvas.width - this.cell || y &gt; this.canvas.height - this.cell) {
return;
}
this.x = x;
this.y = y;
}
};

$(function(){
var ca = new canvasAnimation('canvas');
// 上下左右のボタンで四角形を移動
$('#up').click(function(){
ca.update(0, -1);
});
$('#down').click(function(){
ca.update(0, 1);
});
$('#left').click(function(){
ca.update(-1, 0);
});
$('#right').click(function(){
ca.update(1, 0);
});
});

サンプル

2011.01.07 追記
setInterval より setTimeout の方がアニメーションには向いているかも。もし、処理が重く指定時間内に終わらなかった場合、一定間隔で処理される setInterval だと次の処理が同時進行することになるので。
下記記事とサンプルも参考に。
HTML5 / Canvas キーボード入力

HTML5 / Canvas 色の指定

色付で文字や四角を書く場合、fillRect や fillText の前に fillStyle で色を指定できるよ。

1
2
3
4
5
6
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillStyle = '#FF0000';
context.fillRect(0, 0, 150, 100);
context.fillStyle = '#0000FF';
context.fillText('Hello World!', 150, 100, 50);

ちなみに文字のサイズを変えたい場合は、font に指定します。
※デフォルトは 10px sans-serif

1
context.font = '30px Helvetica';

sample

jQueryゼロから / toggle (クリックで表示・非表示を切り替える)

最近使うこと増えたので知識の上書きアップデートも兼ねてゼロからやり直してみる。
まずはGoogleCDN使って読み込むところから。

1
2
3
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.8.4");

└まとめていろいろ読み込む場合

1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

└個別に読み込む場合

簡単にできるトグルから試してみる。

1
2
3
4
<div id="toggle">
<span></span>
<span style="display: none;"></span>
</div>

こんな感じで二つの同一要素を片方だけ display: none にしておいて、クリックで入れ替えるなら下記のようにします。

1
2
3
4
5
<script type="text/javascript">
$('#toggle').click(function(){
$(this).find('span').toggle();
});
</script>

<span> のところを <img> とかで使うことが多いかな。

サンプル