【05_グラフ表示アプリ】グラフ表示アプリ〔解説編　Vol.1〕HTMLで図形を描くためのタグ＜CANVAS＞

記事概要

この記事は、GASによる以下のグラフ表示アプリの解説記事になります。グラフをはじめとした図形描画は、テキストに比べて煩雑ですので、記事を小さく刻みながら回を分けてご説明します。今回は図形描画のための＜CANVAS＞タグと、描画用データの保管について概略を説明します。

前回の記事はこちら

トップページはこちら

HTMLで図形描画をするための特殊なタグ<CANVAS(キャンバス)>

HTMLファイルというと、タグをつけたテキスト、画像、表を扱うのが一般的で、図形を描かせるというケースはあまりありません。

しかし、HTMLでも線や長方形など、図形を描画する事は可能です。

この為のタグが　<CANVAS(キャンバス)>　タグです。

<CANVAS>タグはちょっと変わったタグで、以下の要領で記述します。

HTMLコード中では<CANVAS>タグでの宣言しかしません。
そこに描画する図形はすべてスクリプト＜cript＞～＜／script＞　の中で記載します。

スクリプト（Javascript）が無いと実装が完了しないという、変わったオブジェクトです！

まず<CANVAS>タグによる宣言ですが、以下の様に＜div＞～＜/div＞で挟まれた中に、要素のID名、巾サイズ、高さサイズを記載することで宣言します。

CANVASタグ記載要領

＜div ＞
　＜canvas id=”ID名” width=巾サイズ height=高さサイズ ＞＜/canvas＞
＜/div＞

・

次に、宣言したCANVASに描画する図形のスクリプトですが、おおまかな流れは以下です。

　・CANVASオブジェクトを取得

　・２次元コンテキスト（メソッドを含む図形オブジェクト）を取得

　・「BeginPath（描画の”ペン”をセット）」メソッドを記述

　・具体的な描画メソッドを記述

コードで表示すると以下の様になります。

図形描画スクリプトの記載要領

＜script＞
var Canvasオブジェクト = document.getElementById(‘ID名‘);
var ２次元コンテキスト= Canvasオブジェクト.getContext(‘2d‘);
２次元コンテキスト.beginPath();
２次元コンテキスト.描画メソッド（）;
＜/script＞

・