ZeroPlus Media > Web制作 > HTML/CSS > HTML5 canvasとは？サンプルを用いて使い方まで紹介

HTML5 canvasとは？サンプルを用いて使い方まで紹介

HTML/CSS

2021/12/06

2023/04/14

Webサイトで<canvas>タグを見たことはありませんか？
実際に見たことはあるけど、使い方がわからない。
という方も、多くいらっしゃると思います。

<canvas>タグを使うと、JavaScriptとHTMLを使ってCanvas APIを利用し、グラフィックを出力することが可能になります。

テキストだと難しく聞こえてしまうので、実際にサンプルを利用して<canvas>タグにグラフィックを出力してみましょう！

この記事でできるようになること

Canvasとは何かを説明できる
<canvas>を使ってグラフィックを出力できる

この記事を理解するのに必要な基礎知識

HTMLの基礎知識
JavaScriptの基礎知識

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

サンプル1.青色の四角形
- 出力結果
- 解説
サンプル2.図形の描画
- 出力結果
- 解説
まとめ

サンプル1.青色の四角形

<canvas id="canvas"></canvas>
<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');

  ctx.fillStyle = '#00A8BE';
  ctx.fillRect(10, 10, 150, 100);
</script>

出力結果

解説

Document.getElementById()メソッドで、 HTML の <canvas>要素への参照を取得します。
HTMLCanvasElement.getContext()メソッドで、要素のコンテキストを取得します。

今回はコンテキストをctxという定数に格納しています。

実際の描画は CanvasRenderingContext2D インターフェイスを用いて行われます。
fillStyleプロパティでは四角形を緑にするようにプログラムを書いています。
fillRect() メソッドはctxに左上から (10, 10) の位置で、幅150単位、高さ100単位の寸法を与えます。

サンプル2.図形の描画

次は図形（canvasタグ）の上をクリック、ドラッグした際に図形を描くことができるサンプルを紹介します。

<canvas id="canvas2"></canvas>
<script>
  const canvas2 = document.getElementById("canvas2");
  let TouchFlag = false;
  // Flag切り替え用関数
  function onDown(e) {
　  TouchFlag = true;
  }
  function onUp(e) {
　  TouchFlag = false;
  }
  // 図形描画時アクション関数
  function mousemove(e) {
　  if( TouchFlag){
　　  drawCalc(e);
　  }
  }
  function onClick(e) {
　  drawCalc(e);
  }
  // 図形描画関数
  function drawCalc(e){
　  // canvas2の位置座標を取得（絶対座標）
　  var clientRect = canvas2.getBoundingClientRect() ;
　  var xRect = clientRect.left ;
　  var yxRect = clientRect.top ;
　  // ページの左端から、要素の左端までの距離
　  var px = window.pageXOffset + clientRect.left ;
　  var py = window.pageYOffset + clientRect.top ;
　  const x = e.pageX - px;
　  const y = e.pageY - py;
　  const ctx2 = canvas2.getContext('2d');
　  ctx2.fillStyle = "#FF9158";
　  ctx2.fillRect(x, y, 10, 10);
  }
  // Flag切り替えイベント
  document.body.addEventListener('mousedown', onDown, false);
  document.body.addEventListener('mouseup', onUp, false);
  // 図形描画時イベント
  canvas2.addEventListener('click', onClick, false);
  canvas2.addEventListener('mousemove', mousemove, false);
</script>
<style>
  #canvas2 {
    background: #666;
  }
</style>

出力結果

図形の上をクリック（タップ）しながら、動かしてみましょう。

解説

canvasの出力方法は先ほどと同様なので、プログラムのみ解説します。
今回、プログラムのゴールは「canvas上でクリックした時と、マウスをクリックしながら動かした時に図形を描画すること」です。

一気に解説すると複雑になるのでそれぞれ分けて解説していきます。

今回は下記4つのイベントハンドラを使用します。

// Flag切り替えイベント
document.body.addEventListener('mousedown', onDown, false);
document.body.addEventListener('mouseup', onUp, false);
// 図形描画時イベント
canvas2.addEventListener('click', onClick, false);
canvas2.addEventListener('mousemove', mousemove, false);

クリックした時に図形を描画する方法
下記コードよりcanvas上でクリックされた時にイベントを発火させます。

canvas2.addEventListener('click', onClick, false);
//canvas2にはcanvas要素の参照が取得されている。

クリック時に呼び出しているonClick関数では、画像を描画するための関数「drawCalc」を実行しています。

function onClick(e) {
    drawCalc(e);
}

drawCalcでは

canvasの左端からクリックされた場所までの距離
canvasのトップからクリックされた場所までの距離

を計算し、そこに10×10の図形を表示します。

function drawCalc(e){
　const x = e.clientX - canvas2.offsetLeft;
　const y = e.clientY - canvas2.offsetTop;

　const ctx2 = canvas2.getContext('2d');
　ctx2.fillStyle = "#FF9158";
　ctx2.fillRect(x, y, 10, 10);
}

クリックかつカーソル移動時に図形を描画

今度はクリックかつ、カーソル移動時にという条件が加わりました。

クリックされている最中かどうかを判定するプログラムを作成

JavaScriptには

クリックした（マウスを押した時）時
クリック終了（マウスのクリックが浮いた）時

を取得できるイベントハンドラが存在します。

そこで、以下のようにFlagを準備するとクリックしているかどうかを判定することができます。

「クリックした時」にFlagをTrue
「クリック終了した時」にFlagをFalse

これでFlagがTrueの時にクリック中と判断することができるプログラムを作ることができます。

実際に作成したプログラムは下記の通りです。

let TouchFlag = false;

// Flag切り替え用関数
function onDown(e) {
    TouchFlag = true;
}
function onUp(e) {
    TouchFlag = false;
}

では最後にこのTouchFlagがTrueの時、canvasタグ上でカーソルが動いた時に図形を描画するプログラムを作ります。

canvasタグ上でカーソルが動いた時に図形を描画するプログラムを作成

canvas2.addEventListener('mousemove', mousemove, false);

// 図形描画時アクション関数
function mousemove(e) {
    if(TouchFlag){
        drawCalc(e);
         }
    }

これでif文でFlagがtrueの時（クリックされている時）にマウスが動いていたら、図形を描画するプログラムが完成です。

drawCalc関数に関しては先ほども出てきた通り、図形を描画する関数となっています。