頭脳一式

Categories: HTML&CSS

canvas要素の使い方

【HTML5】canvas要素の使い方

canvas要素で線を引く方法
- サンプルソース
canvas要素で三角形を描画する方法
- サンプルソース
canvas要素で四角形を描画する方法
- サンプルソース
- 四角形の内側を透過させるには
canvas要素で円を描画する方法
- サンプルソース
- 第6引数anticlockwiseの解説
canvas要素の描画状態の保存と復元
アニメーションの描画を実現する方法
- window.setInterval()を用いる方法
- window.requestAnimationFrame()を用いる方法
canvas要素で図形が重なった場合の表示方法

目次へ

canvas要素で線を引く方法

canvas要素で線を引くには以下の順序でコーディングしていきます。

beginPath()でパスを初期化する
moveTo()でパスの始点となる座標を指定する
lineTo()でパスの終点となる座標を指定する
stroke()で始点から終点までのパスを線で繋いで描画

See the Pen
canvas2 by shiakisudev (@shiakisu)
on CodePen.

図で解説すると以下のようになります。

【解説】canvas要素で線を引く

サンプルソース

HTML

<canvas id="hako" height="300" weight="300"></canvas>

CSS

canvas {
  background-color:aqua;
  border:solid 1px;
}

//canvas要素を取得
let canvas = document.getElementById("hako");

//CanvasRenderingContext2Dオブジェクトを取得。
let c2d = canvas.getContext("2d");

c2d.beginPath();//パスを初期化する。

c2d.moveTo(50,50);//x軸y軸ともに基点から50の位置に移動。
c2d.lineTo(200,200);//x軸y軸ともに基点から200の位置に移動。

c2d.stroke();//線を描画する。

canvas要素で三角形を描画する方法

canvas要素で三角形を描画するには以下の順序でコーディングしていきます。

beginPath()でパスを初期化する
moveTo()で頂点の座標
lineTo()で1辺目のパスの終点となる座標を指定する
lineTo()で2辺目のパスの終点となる座標を指定する
closePath()で残りの辺を繋げる
stroke()で始点から終点までのパスを線で繋いで描画

See the Pen
triangle by shiakisudev (@shiakisu)
on CodePen.

以下のようにどこの座標に頂点が来るのかをイメージすると三角形が作りやすいと思います。

【解説】canvas要素で三角形を引く

コツはclosePath()です。このメソッドを実行しない場合、以下のように三角形の1辺が閉じられません。

See the Pen
triangle2 by shiakisudev (@shiakisu)
on CodePen.

また、三角形を塗りつぶすには、fillStyle()で色を設定して、fill()で塗りつぶします。

See the Pen
triangle3 by shiakisudev (@shiakisu)
on CodePen.

サンプルソース

HTML

<canvas id="hako" height="300" weight="300"></canvas>

CSS

canvas {
  background-color:aqua;
  border:solid 1px;
}

//canvas要素を取得
let canvas = document.getElementById("hako");

//CanvasRenderingContext2Dオブジェクトを取得。
let obj = canvas.getContext("2d");

obj.beginPath(); //パスを初期化する。
obj.moveTo(100,150);//三角形の頂点の位置を決める。
obj.lineTo(150,250);//1辺目のパスを引く。
obj.lineTo(50,250);//2辺目のパスを引く。
obj.closePath();//パスを閉じる。（最後の1辺を引く。）
obj.strokeStyle = "red";//線の色を赤色に設定。
obj.stroke();//線を引く。

obj.fillStyle = "green";//塗りつぶしの色を設定
obj.fill();//三角形を塗りつぶす。

canvas要素で四角形を描画する方法

canvas要素で四角形を描画するにはrect()を用います。

rect()の引数

rect(基点からのx,基点からのy,四角形の幅,四角形の高さ)

canvas要素で四角形を引く

See the Pen
Rectangle1 by shiakisudev (@shiakisu)
on CodePen.

strokeRectメソッドを用いることでパスの設定と線の描画をまとめてできます。

//obj.rect(50,100,100,50);
//obj.stroke();

//上2行分の処理を次の1行で実現できる。
obj.strokeRect(50,100,100,50);

fillRectメソッドを用いることでパスの設定と塗りつぶしをまとめてできます。

//obj.rect(50,100,100,50);
//obj.fillStyle = "red";
//obj.fill();

//上2行分の処理を次の2行で実現できる。
obj.fillStyle = "red";
obj.fillRect(50,100,100,50);

サンプルソース

HTML

<canvas id="hako" height="300" weight="300"></canvas>

CSS

canvas {
  background-color:aqua;
  border:solid 1px;
}

//canvas要素を取得
let canvas = document.getElementById("hako");

//CanvasRenderingContext2Dオブジェクトを取得。
let obj = canvas.getContext("2d");

obj.beginPath(); //パスを初期化する。

obj.rect(50,100,100,50);//四角形のパスを引く
obj.stroke();//線を描画する。

四角形の内側を透過させるには

四角形の内側を透過させるにはclearRect()を用います。

See the Pen
Rectangle2 by shiakisudev (@shiakisu)
on CodePen.

//canvas要素を取得
let canvas = document.getElementById("hako");

//CanvasRenderingContext2Dオブジェクトを取得。
let obj = canvas.getContext("2d");

obj.beginPath(); //パスを初期化する。
obj.fillStyle = "red";//塗りつぶしの色を設定する。
obj.fillRect(50,100,100,50);

//2つ目のオブジェクトを取得。
let obj2 = canvas.getContext("2d");
obj2.beginPath(); //パスを初期化する。
obj2.clearRect(55,110,10,10);//四角形を透過して表示。

canvas要素で円を描画する方法

canvas要素で円を描画するにはarc()を用います。

arc()の引数

arc(基点からのx,基点からのy,円の半径,開始位置,終了位置,円弧を描く方向)

引数の説明

第1引数xと第2引数yの交わる点が円の中心点になります。
第6引数の円弧を描く方向はanticlockwiseと呼び、開始位置から終了位置までを時計回り(false)で書くか反時計回り(true)で書くかを指定します。
「Math*PI」は9時の方向で、「Math*PI * 2」は3時の方向です。

canvas要素で円弧を引く

See the Pen
arc by shiakisudev (@shiakisu)
on CodePen.

サンプルソース

HTML

<canvas id="hako" height="300" weight="300"></canvas>

CSS

canvas {
  background-color:aqua;
  border:solid 1px;
}

//canvas要素を取得
let canvas = document.getElementById("hako");

//CanvasRenderingContext2Dオブジェクトを取得。
let obj = canvas.getContext("2d");

obj.beginPath(); //パスを初期化する。
obj.fillStyle = "red";//塗りつぶしの色を赤色に設定。
obj.arc(100,150,50,Math.PI * 2,Math.PI,false);//円弧の設定
obj.fill();//円弧を描画。

第6引数anticlockwiseの解説

開始位置から終了位置に向かって円弧を描く場合、時計回りに描きたい場合はfalseを指定し、反時計回りに描きたい場合はtrueを指定します。

canvas要素の円弧anticlockwiseの解説

実際のサンプルは以下のとおりです。

See the Pen
anticlockwise by shiakisudev (@shiakisu)
on CodePen.

//canvas要素を取得
let canvas = document.getElementById("hako");

//開始位置が右側の場合のサンプル
let obj = canvas.getContext("2d");

obj.beginPath(); //パスを初期化する。
obj.fillStyle = "blue";//塗りつぶしの色を青色に設定。
obj.arc(50,50,50,Math.PI * 2,Math.PI,true);//円弧の設定
obj.fill();//円弧を描画。

obj.beginPath(); //パスを初期化する。
obj.arc(50,100,50,Math.PI * 2,Math.PI,false);//円弧の設定
obj.fill();//円弧を描画。

//------------------------------------
//開始位置が左側の場合のサンプル
let obj2 = canvas.getContext("2d");

obj2.beginPath(); //パスを初期化する。
obj2.fillStyle = "red";//塗りつぶしの色を赤色に設定。
obj2.arc(150,50,50,Math.PI,Math.PI * 2,false);//円弧の設定
obj2.fill();//円弧を描画。

obj2.beginPath(); //パスを初期化する。
obj2.arc(150,100,50,Math.PI,Math.PI * 2,true);//円弧の設定
obj2.fill();//円弧を描画。

canvas要素の描画状態の保存と復元

save()とrestore()を使用することで描画状態の保存と復元が可能です。
保存するにはsave()を使用し、復元するにはrestore()を使用します。
save()では描画状態をスタックで保存していくため、restore()では最後に保存された状態から順に復元できます。
以下のサンプルでは、赤→青→黄の順で保存した後に、黄→青→赤の順で復元して四角形を描画しています。

See the Pen
save&resotre by shiakisudev (@shiakisu)
on CodePen.

//canvas要素を取得
let canvas = document.getElementById("hako");

//CanvasRenderingContext2Dオブジェクトを取得。
let obj = canvas.getContext("2d");

obj.beginPath(); //パスを初期化する。

obj.fillStyle = "red";//塗りつぶしの色を赤色に設定。
obj.save();//保存

obj.fillStyle = "blue";//塗りつぶしの色を青色に設定。
obj.save();//保存

obj.fillStyle = "yellow";//塗りつぶしの色を黄色に設定。
obj.save();//保存

obj.fillStyle = "black";//塗りつぶしの色を黒色に設定。

//黄色で復元される
obj.restore();//復元
obj.fillRect(50,0,100,50);//四角形を描画

//青色で復元される
obj.restore();//復元
obj.fillRect(50,50,100,50);//四角形を描画

//赤色で復元される
obj.restore();//復元
obj.fillRect(50,100,100,50);//四角形を描画

アニメーションの描画を実現する方法

アニメーションの描画を実現するには以下の2つの方法があります。
基本的には静止画の描画を繰り返して動画に見せかける手法です。

window.setInterval()を用いる方法
window.requestAnimationFrame()を用いる方法

`window.setInterval()`を用いる方法

以下のサンプルでは、window.setInterval()を用いて100ミリ秒毎に四角形の描画を繰り返して動いているように見せています。

See the Pen
ZELNgpB by shiakisudev (@shiakisu)
on CodePen.

window.setInterval()の中で最初にclearRectを呼び出してcanvas要素をクリアしています。これはなぜかというと、クリアしておかないと前回描画した四角形がそのまま残ってしまうからです。

//canvas要素を取得
let canvas = document.getElementById("hako");

//CanvasRenderingContext2Dオブジェクトを取得。
let obj = canvas.getContext("2d");

obj.beginPath(); //パスを初期化する。

obj.fillStyle = "red";

let x = 0;
setInterval(function(){
  obj.clearRect(0,0,canvas.width,canvas.height);//四角形をクリア
  obj.fillRect(x,100,100,50);//四角形を描画
  x = x + 10;
  if(x > 300){
    x = 0;
  }
},100);

`window.requestAnimationFrame()`を用いる方法

requestAnimationFrame()は指定した関数を実行することでアニメーションを実現します。指定した関数の実行回数は通常は1秒間に60回ですが、ディスプレイのリフレッシュレートに合わせて呼び出し回数を調整します。バックグラウンドで表示されているページはパフォーマンス向上のため、更新回数が少なくなります。

以下の例では、5秒経過するまでアニメーションを実行しています。

See the Pen
requestAnimationFrame by shiakisudev (@shiakisu)
on CodePen.

HTML

<div id="box"></div>

CSS

div{
  position:absolute;
  width:50px;
  height:50px;
  background-color:red;
}

let ele = document.getElementById("box");

let start = 0;
function anime(timestamp){
  if(0 == start) start = timestamp;
  let progress = timestamp - start;
  ele.style.left = (progress / 10) + "px";
  if (progress < 5000){
    window.requestAnimationFrame(anime);
  }
}
//アニメーションの実行
window.requestAnimationFrame(anime);

canvas要素で図形が重なった場合の表示方法

複数の図形が重なった場合の表示方法をglobalCompositeOperationで指定できます。

値	説明
`source-over`	初期値。後から描画した図形が上に来る。
`destination-over`	先に描画した図形が上に来る。
`xor`	重ならない部分のみ描画し、図形どうしが重なる部分は透明にする。