未分類 CanvasAPIでパズル管理
パズルの管理もぐら叩きでは、複数ある各もぐら穴を配列変数で管理パズルでも、同様に各パズルのピース、つまり分割したブロックを配列変数で管理するこのため、パズルピースを0~15で管理図にすると01234567891112131415というかんじ...
未分類 未分類 Canvasゲームのためのヒント
Canvasゲームのためのヒントまず、画面サイズを固定することでゲームの座標計算が楽になるこれは、Viewportの設定をwidth=device-widthにして固定すればokさらに、ユーザーがブラウザーをズームしたりできないようにuse...
未分類 簡単なスマートフォンの検出
簡単なiOS/Androidの検出関数fuction isSmartphone(){var ua=navigator.userAgent;return(ua.macth(/iPhone|iPod|iPad|Android/)!=null);...
未分類 スマートフォンでのタッチイベント
スマートフォンでのタッチイベントPCのマウス操作も、画面タッチ対応になっているonmousedownマウスボタンを押したときのイベントこれは、画面タッチしたときのイベントになるonmouseupマウスボタンを離したときのイベントこれは、画面...
未分類 画像を一部分だけ切り取って描画
画像を一部分だけ取り出して描画 画像を一部分だけ取り出してcanvasへ描画するにはdrawImage()を使う書式はcontext.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)以下は引数...
未分類 Canvasでベジエ曲線を使う
ベジエ曲線を使う二次ベジエ曲線の書式はcontext.quadraticCurveTo(cpx, cpy, x, y)三次ベジエ曲線の書式はcontext.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x , ...
未分類 arcTo()について
arcTo()についてarcTo()も円弧を描くこちらは、パスの最終地点から座標(x1,y1)と座標(x2,y2)を通る曲線をパスに追加するarcTo()の書式はcontext.arcTo(x1,y1, x2,y2, 半径)
未分類 円弧ベジエ曲線
円弧ベジエ曲線図形を描くとき、円弧を描くarc()arcTo()ベジエ曲線を描くbezierCurveTo()が使えるまずは、arc()についてarc()は、パスに基点を追加し円弧を描くarc()の書式は、context.arc(x, y,...
未分類 パスと塗りについて
パスと塗りコンピューターの世界でパスは、ファイルやフォルダーの場所を示すがグラフィックの世界だと図形の外郭、輪郭になる以下は、パスを操作するメソッドbeginPath()パスの指定をリセットclosePath()現在まで指定されたパスを閉じ...
未分類 canvasへ多角形の描画
canvasで多角形の描画多角形を描画するにははじめに多角形の頂点を結んだパスを描画つまり、点を作るこれは、moveTo()で作成する次に、線を引くこれは、lineTo()これで、多角形の頂点の座標をつなげていくその後、fill()で、多角...