HTML5 Canvasを使う①

2018年12月19日おやじコメントする

HTML5 について

HTML（Hyper Text Markup Language）が、Webページを作るための言語であることはなんとなく知っていましたが、恥ずかしながら “HTML5” というものがあることは今年になって知りました。
既にこの “HTML5” が使われる様になって、結構な年月が過ぎている様ですが、私自身は知りませんので少し勉強してみようと思います。ブラウザー上で絵を書く、写真をドラッグアンドドロップで登録する、USBカメラに接続することなど、興味を持っていることを中心に私自身の環境で実現出来るか確認して行こうと思っています。今回は、ブラウザー上に絵を書くのに使用できる “CANVAS” 要素について確認します。

HTML5 CANVAS 要素について

“CANVAS” 要素は、まさにブラウザー上に絵を描くためのキャンバスです。HTML5が生まれる前は、絵を描く前に “Flash” 等のプラグインを用いて描画を行いましたが、HTML5の“CANVAS” 要素と JavaScript だけで描画が可能となったとのことです。早速使ってみることにします。

（１）線を描く（ canvas_001.html ）　（←リンク有）
“CANVAS” によって、描画領域（以後、“キャンパス”と呼ぶことにします）を確保し線を書いてみます。下図の通り水色のキャンパス（500px X 300px）を確保し、キャンバス上に半透明の赤色線を描画します。

html + JavaScriptの内容を簡単に説明します。とは言っても私自身がビギナーですので、誤って理解していることも多々あるかと思いますが、予めご了承下さい。
行番7～35の<script type=”text/javascript”>～</script>でキャンパス上に矩形形状を描画します。キャンパスの定義は行番40で行っています。ここでキャンパス領域の幅（500），高さ（300），id名（cvs_area），背景色（#CCFFFF(水色)）を定義しています。
行番38（ onLoad=”draw_test()” ）によって、ページの読み込み後、JavaScript で定義している関数（draw_test()）を呼び出し、描画を行っています。
行番38（ document.getElementById(‘cvs_area’) ) でID名を指定し対象となるキャンバス要素を取得します。さらにCANVAS APIを使用するには、２Dコンテキストなるオブジェクトを取得する必要があるとのことで、行番13で実行しています。以後、オブジェクトを格納した変数 “context” のメソッドやプロパティを使って図の描画を行います。
今回のテストでは、行番22～28でパスを定義し、行番31で定義したパスの輪郭を表示します。
パス定義は、“context.beginPath();”で始まり、“moveTo”で始点を定義、以後“lineTo”で線をつなぎ、“context.closePath()”でパスの定義を完了します。定義だけではパスは表示されず、“stroke” によって実際の画面上へ表示しています。線の太さ，色はそれぞれ、行番17，行番15で行っています。

<!DOCTYPE html>
<html lang="ja">

  <head>
  <meta charset="UTF-8">
  <title>CANVAS描画テスト</title>
    <script type="text/javascript">
      <!--
      function draw_test() {
  	//描画コンテキスト取得
  	var canvas = document.getElementById('cvs_area');
	if (canvas.getContext) {
	  var context = canvas.getContext('2d');

	  //描画内容指定
	  //線幅指定（2）
	  context.lineWidth = 2;
	  //線色指定（赤，半透明）
	  context.strokeStyle = "rgba(255,0,0,0.5)";

	  //矩形パス定義
	  context.beginPath();
	  context.moveTo(100,50);
	  context.lineTo(400,50);
	  context.lineTo(400,250);
	  context.lineTo(100,250);
	  context.lineTo(100,50);
	  context.closePath();

	  //パス輪郭表示
	  context.stroke();
	}
      }
      -->
    </script>
  </head>

  <body onLoad="draw_test()">
    <h2>CANVAS描画テスト</h2>
    <canvas width="500" height="300" id="cvs_area" style="background-color:#CCFFFF;"></canvas>
  </body>

</html>

（２）パス内部を塗り潰す（ canvas_002.html ）（←リンク有）
尚、定義したパスの内部の塗り潰しも出来ます。
下図はパス内部を青で塗り潰し後、赤で輪郭線を描いています。

下図は輪郭線を描いた後、塗り潰しを行っています。線を意図的に太くし、重なり部分が上書きされることを確認しました。
輪郭（赤半透明）描画後、塗り潰し（青半透明）を行うと下図の様になります。

一番上のパス内部を青で塗り潰し後、赤で輪郭線を描く場合の html + JavaScriptの内容を簡単に説明します。描画以外の部分は重複しますので省略します。
行番17で線幅を“20”にしています。これは重なっている部分の状態を判りやすくする為です。行番19で輪郭部の色を設定し、行番21で塗り潰す色を設定しています。いずれも不透明（”1”）を設定しています。
パス定義の中で、先回は行番29でしたが、今回は行番30にしています。図左側の尖った先端の位置です。これはパスを設定する時に始点に戻す必要性を確認する為に行ったのですが、結果的には不要の様です。始点と終点は自動的にパスが形成されています。
実際の描画は、行番34でパス内部の塗り潰し、行番36で輪郭を描いています。この順番を変更すれば、輪郭を描いた後、塗り潰しを実行することが出来ます。

<!DOCTYPE html>
<html lang="ja">

  <head>
  <meta charset="UTF-8">
  <title>CANVAS描画テスト</title>
    <script type="text/javascript">
      <!--
      function draw_test() {
  	//描画コンテキスト取得
  	var canvas = document.getElementById('cvs_area');
	if (canvas.getContext) {
	  var context = canvas.getContext('2d');

	  //描画内容指定
	  //線幅指定（20）
	  context.lineWidth = 20;
	  //線色指定（赤）
	  context.strokeStyle = "rgba(255,0,0,1)";
	  //塗り潰し色指定（青）
	  context.fillStyle = "rgba(0,0,255,1)";

	  //矩形パス定義
	  context.beginPath();
	  context.moveTo(100,50);
	  context.lineTo(400,50);
	  context.lineTo(400,250);
	  context.lineTo(100,250);
	  //context.lineTo(100,50);
	  context.lineTo(20,150);
	  context.closePath();

	  //パス内部塗り潰し
	  context.fill();
	　//パス輪郭表示
	  context.stroke();

	}
      }
      -->
    </script>
  </head>

  <body onLoad="draw_test()">
    <h2>CANVAS描画テスト</h2>
    <canvas width="500" height="300" id="cvs_area" style="background-color:#CCFFFF;"></canvas>
  </body>

</html>

（３）長方形，円の描画（ canvas_011.html ）（←リンク有）
長方形，円の描画を確認します。下の図に示す通り水色のキャンバス上に①～⑦の順に描画します。

各描画内容とhtml＋JavaScriptコードの対応を次表に示します。描画以外の部分の記載は重複しますので省略します。

No	描画内容	コード行番
①	赤色長方形外枠（輪郭線）	行番２９
②	青色長方形（塗り潰し）	行番３０
③	長方形クリア（切り抜き）	行番３１
④	赤色円弧（180度）	行番４３～４６
⑤	青色円弧（180度）	行番４９～５２
⑥	青色半円（塗り潰し）	行番５５～５８
⑦	赤色半円（塗り潰し）	行番６１～６４

【html＋JavaScriptコード】

<!DOCTYPE html>
<html lang="ja">

  <head>
  <meta charset="UTF-8">
  <title>CANVAS描画テスト</title>
    <script type="text/javascript">
      <!--
      function draw_test() {
  	//描画コンテキスト取得
  	var canvas = document.getElementById('cvs_area');
	if (canvas.getContext) {
	  var context = canvas.getContext('2d');

	  //描画内容指定
	  //線幅指定
	  context.lineWidth = 10 ;
	  //線色指定（赤）
	  context.strokeStyle = "rgba(255,0,0,1)";
	  //塗り潰し色指定（青）
	  context.fillStyle = "rgba(0,0,255,1)";
	  
	  //長方形のギャップ（間隔）設定
	  var gp_1 = 25 ;
	  var gp_2 = 50 ;
	  var gp_3 = 75 ;

	  //長方形の描画
	  context.strokeRect( gp_1 , gp_1 , canvas.width-2 * gp_1 , canvas.height-2 * gp_1 );
	  context.fillRect( gp_2 , gp_2 , canvas.width-2 * gp_2 , canvas.height-2 * gp_2 );
	  context.clearRect( gp_3 , gp_3 , canvas.width-2 * gp_3 , canvas.height-2 * gp_3 );

	  //線幅指定
	  context.lineWidth = 20 ;

	  //円中心，半径計算
	  var cnt_w = canvas.width / 2 ;
	  var cnt_h = canvas.height / 2 ;
	  var rds_0 = (canvas.height - 2 * gp_3) / 2 - 20 ;
	  var rds_1 = (canvas.height - 2 * gp_3) / 2 - 50 ;

	  //円弧描画（赤）
	  context.beginPath() ;
	  context.strokeStyle = "rgba(255,0,0,1)";
	  context.arc(cnt_w,cnt_h,rds_0,45*Math.PI/180,225*Math.PI/180,false) ;
	  context.stroke() ;

	  //円弧描画（青）
          context.beginPath() ;
	  context.strokeStyle = "rgba(0,0,255,1)";
	  context.arc(cnt_w,cnt_h,rds_0,45*Math.PI/180,225*Math.PI/180,true) ;
	  context.stroke() ;

	  //半円塗り潰し（青）
	  context.beginPath() ;
	  context.fillStyle = "rgba(0,0,255,1)";
	  context.arc(cnt_w,cnt_h,rds_1,45*Math.PI/180,225*Math.PI/180,false) ;
	  context.fill() ;

	  //半円塗り潰し（赤）
	  context.beginPath() ;
	  context.fillStyle = "rgba(255,0,0,1)";
	  context.arc(cnt_w,cnt_h,rds_1,45*Math.PI/180,225*Math.PI/180,true) ;
	  context.fill() ;

	}
      }
      -->
    </script>
  </head>

  <body onLoad="draw_test()">
    <h2>CANVAS描画テスト</h2>
    <canvas width="500" height="400" id="cvs_area" style="background-color:#CCFFFF;"></canvas>
  </body>

</html>

今回のまとめ

このページを作成し、少し “CANVAS” の使い方が整理できた様な気がします。ただ、これだけでは少し寂しいので次回はもう少しレベルアップを目指します。