月別: 2013年3月

スマートフォンでのタッチイベント
PCのマウス操作も、画面タッチ対応になっている
onmousedown
マウスボタンを押したときのイベント
これは、画面タッチしたときのイベントになる
onmouseup
マウスボタンを離したときのイベント
これは、画面から指を離したときのイベントになる
onclick
マウス対象をクリックしたときのイベント
これは、画面をタップしたときのイベントになる
そして、スマートフォン用の画面タッチ専用のイベント
これらは、複数の指での操作
通称マルチタップ対応
ontouchstart
画面に指がふれたとき
ontouchmove
画面をタッチしたまま動かしたとき
ontouchend
画面から指を離したとき
ontouchcancel
タッチ操作を途中で中断したとき
テスト環境でパソコンも使うなら
パソコン用には
onmousemove
onclick
を使い、
スマートフォン用には
ontouchstart
を使うなど、環境で切り替えできるようにすると
便利

画像を一部分だけ取り出して描画　
画像を一部分だけ取り出して
canvasへ描画するには
drawImage()を使う
書式は
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
以下は引数の意味
image
Imageオブジェクト
sx
切り取る範囲のx座標
sy
切り取る範囲のy座標
sw
切り取る範囲の横幅
sh
切り取る範囲の縦幅
dx
canvasへ描画する画像のx座標
dy
canvasへ描画する画像のy座標
dw
canvasへ描画する画像の横幅
dh
canvasへ描画する画像の縦幅
この
dw
dh
の値を
dw*3
とか
dh*3とかにすると、拡大表示ができるようになる
たとえば
等倍表示が
context.drawImage(image,0,0);
で
一部分だけ切り取って3倍の大きさで表示するなら
context.drawImage(
image,100,100,85,85,10,10,85*3,85*3)
とする
この意味は
image画像を
x=100,y=100 の座標から
85 * 85 の大きさで切り取り
canvasの座標 x=10,y=10 の座標へ描画
このとき、元の 85 x 85 の画像を
3倍の大きさで表示
という意味になる

ベジエ曲線を使う
二次ベジエ曲線の書式は
context.quadraticCurveTo(cpx, cpy, x, y)
三次ベジエ曲線の書式は
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x , y)
二次ベジエ曲線を描く
quadraticCurveTo()は、
最後に指定した地点から
指定の地点である(x,y)まで
線を描画する
このとき、制御点である(cpx,cpy)を伴う
二次ベジエ曲線を使って線を接続し
地点(x,y)をパスに追加する
つぎに、
三次ベジエ曲線を描く
bezierCurveTo()
これは、最後に指定した地点から
指定の地点(x,y)まで線を描画する
このとき、制御点である(cp1x,cp1y)と
(cp2x,cp1y)を伴う
三次ベジエ曲線を使って線を接続し
地点(x,y)へパスを追加する

arcTo()について
arcTo()も円弧を描く
こちらは、パスの最終地点から
座標(x1,y1)
と
座標(x2,y2)
を通る曲線をパスに追加する
arcTo()の書式は
context.arcTo(x1,y1, x2,y2, 半径)

円弧ベジエ曲線
図形を描くとき、円弧を描く
arc()
arcTo()
ベジエ曲線を描く
bezierCurveTo()
が使える
まずは、arc()について
arc()は、パスに基点を追加し
円弧を描く
arc()の書式は、
context.arc(x, y, 半径, 開始角度, 終了角度, 逆時計回り指定)
普通は時計回りに円を描くけと
逆時計回り指定を true にすると
左回りに円弧を描く
あと、角度の指定は
度ではなくラジアンなので注意
円の一周が360度とする度、つまりdrg
これをラジアン rad へ変換する計算式は
var rad = Math.PI / 180;

パスと塗り
コンピューターの世界で
パスは、ファイルやフォルダーの場所
を示すが
グラフィックの世界だと
図形の外郭、輪郭になる
以下は、パスを操作するメソッド
beginPath()
パスの指定をリセット
closePath()
現在まで指定されたパスを閉じる
moveTo(x,y)
描画を始める基点(x,y)座標の指定
lineTo(x,y)
前回の描画位置から指定した(x,y)座標まで
線を引く
そして、パスを描画するのに使うメソッド
stroke()
パス(輪郭)を描画する
fill()
パスを塗りつぶす
続いて、描画スタイルの指定に利用するプロパティ
fillStyle
塗りつぶしに使う色やスタイルの指定
strokeStyle
パスの線色、スタイルの指定
lineWidth
パスの線の太さの指定

canvasで多角形の描画
多角形を描画するには
はじめに多角形の頂点を結んだパスを描画
つまり、点を作る
これは、moveTo()で作成する
次に、線を引く
これは、lineTo()
これで、多角形の頂点の座標をつなげていく
その後、fill()で、
多角形の中身を塗りつぶして
描画完成

canvasで多角形の描画
多角形を描画するには
はじめに多角形の頂点を結んだパスを描画
つまり、点を作る
これは、moveTo()で作成する
次に、線を引く
これは、lineTo()
これで、多角形の頂点の座標をつなげていく
その後、fill()で、
多角形の中身を塗りつぶして
描画完成
以下は三角形描画のソース
まぁJavascriptだけだけど
//コンテキスト取得
var canvas=document.getElementById(“a_canvas”);
var context=canvas.getContext(“2d”);
//パスを設定
context.beginPath();
書き始めの座標まで移動
context.moveTo(150,0);
順番に線を引く
context.lineTo(300,300);
context.lineTo(0,300);
context.lineTo(150,0);
context.closePath();
三角形の中を塗りつぶし
context.fillStyle=”#ff0000″;
context.fill();

Javascriptで定期的に処理を実行
Javascriptで定期的に処理を実行するなら
setInterval()
を使う
書式は、
setInterval(func, msec)
引数の意味は
func
定期的に繰り返す関数のオブジェクト
msec
ミリ秒で繰り返し間隔を指定
setInterval()
の戻り値は、タイマーを識別するIDの値になる
Linuxのcronみたいに
定期的処理したいときに使うと考えるとわかりやすい
これにより、アニメーションとかの定期的実行が可能

canvasの基本的な使い方
canvasタグを記述し
canvasオブジェクト取得
canvasオブジェクトからコンテキスト取得
コンテキストのメソッドやプロパティを使い
描画する
canvasオブジェクト取得しただけだと
描画まではできない
これは、canvasオブジェクトから描画用のコンテキスト取得しないとできないという仕組み
コンテキスト取得には
canvasオブジェクトにある
getContext()を使う
いまはまだ２Ｄしか描けないから
2dと指定してるけど
将来的には3Dも可能になるらしい
たとえるなら
canvasは紙
コンテキストは筆