Help us understand the problem. What is going on with this article?

HTML5 Canvas 入門

More than 1 year has passed since last update.

今更ながら、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 の違い

図形を描画するためのコンテキストオブジェクトを取得する

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away