今更ながら、Canvas をまともに勉強したことがなかったので、一からやってみました。
これまでの人生、 JavaScript は初心者の超えるべき壁をすっ飛ばして学んできたので、おさらいも兼ねて。
キャンバス上でクリックすると、その座標で図形を描画できるようになるチュートリアルです。
コードだけ見たい方はこちらを。
https://github.com/kyrieleison/canvas-tutorial/blob/master/index.html
キャンバスを準備する
<!DOCTYPE html>
<html>
<head>
<title>canvas tutorial</title>
<style>
#canvas {
background: #666;
}
</style>
</head>
<body>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
var canvas = document.getElementById("canvas");
// ここにコードを書いていきます
</script>
</body>
</html>
これから使う HTML の雛形になります。canvas 要素を定義します。
キャンバスで発生するイベントを補足する
function onDown(e) {
console.log("down");
}
function onUp(e) {
console.log("up");
}
function onClick(e) {
console.log("click");
}
function onOver(e) {
console.log("mouseover");
}
function onOut() {
console.log("mouseout");
}
canvas.addEventListener('mousedown', onDown, false);
canvas.addEventListener('mouseup', onUp, false);
canvas.addEventListener('click', onClick, false);
canvas.addEventListener('mouseover', onOver, false);
canvas.addEventListener('mouseout', onOut, false);
イベントリスナーを登録すると、その要素内で発生したイベントを補足できます。
イベントリスナーを登録するためのメソッドが element.addEventListener() メソッドです。
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
第一引数にはイベントの種類、第二引数にはそのイベントが発生した時に通知を受け取るオブジェクト(多くの場合、関数オブジェクト)を渡します。
第三引数にはイベント通知を受け取るイベントフェーズを指定します。デフォルトは false です。
http://hakuhin.jp/js/event.html#EVENT_01
イベントの種類
- mousedown: マウスの左ボタンが押されたときに発生
- mouseup: マウスの左ボタンが離されたときに発生
- click: クリックされたときに発生(mousedown, mouseup の後)
- mouseover: カーソルが乗ったときに発生
- mouseout: カーソルが離れたときに発生
その他、JavaScript の element.addEventListener() メソッドで補足できるイベント一覧はこちらにあります。
https://developer.mozilla.org/ja/docs/Web2/Reference/Events
https://developer.mozilla.org/ja/docs/Web/Reference/Events
使用例は以下が参考になりました。
http://qiita.com/nekoneko-wanwan/items/9af7fb34d0fb7f9fc870
キャンバス上の座標を取得する
function onClick(e) {
console.log("click");
var x = e.clientX - canvas.offsetLeft;
var y = e.clientY - canvas.offsetTop;
console.log("x:", x, "y:", y);
}
clientX/Y でイベント発行した地点の座標を取得できます。
これはブラウザの viewport における座標のため、キャンバスにおける相対位置を出すには、キャンバスのオフセットを減算します。
screenX/Y, clientX/Y, pageX/Y の違い
- screenX/Y: フルスクリーン画面における座標
- clientX/Y: ブラウザの viewport における座標(scroll しても変わらない)
- pageX/Y: ページにおける座標(scroll したら変わる/非推奨)
http://stackoverflow.com/questions/9262741/what-is-the-difference-between-pagex-y-clientx-y-screenx-y-in-javascript
図形を描画するためのコンテキストオブジェクトを取得する
var context = canvas.getContext('2d');
キャンバスに描画するためには、まず canvas 要素のコンテキストオブジェクトを取得します。
これは描画のための API にアクセスするためのオブジェクトです。
コンテキストオブジェクトを取得するメソッドが canvas.getContext() メソッドです。
https://developer.mozilla.org/ja/docs/Web/API/HTMLCanvasElement/getContext
第一引数にコンテキストIDを渡します。これによって取得するコンテキストオブジェクトの種類が決まります。
コンテキストIDの種類
- 2d: 2次元グラフィックスの描画に使用。CanvasRenderingContext2D オブジェクトを返す
- webgl: 3次元グラフィックスの描画に使用(WebGL ver1)。WebGLRenderingContext オブジェクトを返す
- webgl2: 3次元グラフィックスの描画に使用(WebGL ver2)。WebGL2RenderingContext オブジェクトを返す
図形を描画する
function onClick(e) {
console.log("click");
var x = e.clientX - canvas.offsetLeft;
var y = e.clientY - canvas.offsetTop;
console.log("x:", x, "y:", y);
drawRect(x, y, 10, 10);
}
function drawRect(x, y, width, height) {
var context = canvas.getContext('2d');
context.fillRect(x, y, width, height);
}
canvas.addEventListener('click', onClick, false);
これでクリックした場所に縦10px X 横10pxの長方形が描画されます。
長方形を描画するメソッドには context.fillRect() メソッドと context.strokeRect() メソッドがあります。
context.fillRect() メソッドは塗りつぶされた長方形を、context.strokeRect() メソッドは枠線のみの長方形を描画できます。
それぞれ、第一引数と第二引数に長方形の左上端の X 座標と Y 座標、第三引数に横幅、第四引数に縦幅を渡します。
https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/fillRect
https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/strokeRect
その他、図形の描画の仕方についてはこちらのチュートリアルが丁寧です。
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes
図形の色を指定する
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "blue";
context.fillRect(10, 10, 100, 100);
図形の色を指定するには、コンテキストオブジェクトの context.fillStyle プロパティに色情報を与えます。
ここで与える色情報は、CSS の記法と同じフォーマットを使用できます。
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle
また、図形の枠線の色を指定するには context.strokeStyle プロパティを使います。
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle
以上で Canvas の簡単な入門ができました。
順に理解していけば、JavaScript 初心者でもさほど詰まらずに使えそうですね。
MDN のチュートリアルはとても丁寧かつ、正しい情報が載っているので、ぜひ参考に。
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial