2008年07月29日

よろしい、ならばiPhoneでくぱぁだ(2)

長すぎて切れてしまいました。



canvas要素

 canvas要素です。HTML5の新規格でjavascriptからお絵かきが出来ますよ。Flashが使えないiPhoneでリッチなコンテンツを作るときには欠かせません!

 一番詳しいのはMozillaのチュートリアルです。

Canvas tutorial


 とりあえず、HTMLの方に<canvas id="cupha" width="320" height="415"></canvas>を置きます。

 canvas要素は本来アニメーションを実現するためのものではないので、更新しまくることでアニメーションを擬似的に実現します。タイマーを使って更新するという方法もありますが、今回はonTouchMoveでdraw()を呼び出すことでアニメーションっぽくしました。
 
 clearRectで毎回画像を消さなきゃいけないところに注意です。

var canvas = $('cupha');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 320, 380);
if (canvas.getContext) {
ctx.beginPath();
ctx.moveTo(160, 45);
ctx.quadraticCurveTo(160 - movpx / 2, 250, 160, 380);
ctx.stroke();
ctx.moveTo(160, 45);
ctx.quadraticCurveTo(160 + movpx / 2, 250, 160, 380);
ctx.stroke();


 moveToで筆を置いて、quadraticCurveToで線を決めて、stroke()で一気に筆を引くイメージをすると理解が早いと思います。quadraticCurveToは他の関数に置き換えられるかもしれませんし、もっと多くの点を経由することもできます。


まとめ
 もともと擬似的にピンチイベントを取得するために作ったんですが、中途半端です。Y座標も取得して、window.onPinchみたいな使い勝手でまとめられるとかっこいいですね。ちなみにタイトルはホッテントリメーカーのお世話になりました。

追記:画像を挿入できるようにしました

**


hayashi311 at 10:05コメント(0)トラックバック(0) 

トラックバックURL

コメントする

名前
URL
 
  絵文字
 
 
Twitter
記事検索
QRコード
QRコード
  • ライブドアブログ