タグ:Canvas

HTML5でお絵かきツール

HTML5のCanvasを使ってお絵かきツールv0.5を作ってみました。

ベースはASCⅡ.jpのこちらの記事を参考に作成。そこに「カラーピッカー.js」や「rgbcolor.js」を投入し、「Canvas Painter」というサイトのソースを参考にさせてもらいながら作りました。

ファイヤーフォックスでしか動かない、レイアウトが雑、ツールの機能がまだ不十分(特に不透明度・ブラシ(ぼかし))など問題点が多々ありますが、一応上げてみます。

お絵かきツールv0.5サンプル [新しいウィンドウで開く] (Firefox3.6以上でのみ正常動作します)

ソースはこちら

※ソースについて

今回、自分で改良したファイルは

  • examples/index.html
  • draw/draw.js
  • rgbcolor/rgbcolor.js (this.toRGBに引数を付け加えただけ)

だけです。

その他については上記で掲載したサイトからダウンロードしたり、載っていたソースをそのまま使用しています。

 

制作にあたり、今回は以下のサイトを参照させていただきました。

HTML5.jp:該当ページ「Canvas」「Javascript ライブラリー

ASCⅡ.jp:該当ページ「HTML5のCanvasで作る、Flash不要のお絵かきツール

もやし日記:該当ページ「色表現を変換するJavaScriptライブラリ - rgbcolor.js

HTML5で棒グラフを表示する(Canvas)

HTML5のCanvasを利用すると、棒グラフを表示することができます。(Javascriptが必要ですが)

やり方はこちら JavaScript ライブラリー – HTML5.JP

上記のサイトから「graph_vbar_1_0_4.zip」をダウンロードして解凍すると、そのフォルダの中に「examples」フォルダがありますので、その中のサンプルを実行してみてください。棒グラフが表示されるかと思います。

ただこのサンプルでは、スクリプト内に直接パラメータを配列で入力しなくてはなりません。

var items = [
    ["商品A", 20, 58, 40, 14, 38, 20, 40],
    ["商品B", 10, 14, 58, 80, 70, 90, 20],
    ["商品C", 10, 14, 58, 80, 70, 90, 20],
    ["商品D", 10, 14, 58, 80, 70, 90, 20],
    ["商品E", 10, 14, 58, 80, 70, 90, 20]
 ];

てことで、tableに入れたパラメータを吸い出してグラフ化するように変更しました。

とはいえ、jsファイルを直接変更する必要はありません。

あくまでhtmlファイルの中に記述するスクリプトを編集しただけです。今回は「sample_graph_vbar_4.html」を改良して使用しました。(まずはサンプルを見たい方はこちら

 

手順

1.bodyタグ内に、パラメータが入ったテーブルを記述してください。

※tableタグにid="graph"を忘れずに記述してください。

theadタグtbodyタグを忘れないよう注意してください。(theadタグはグラフのx軸の項目に使用します)

<table id="graph">
    <thead>
        <tr>
            <th>商品名</th>
            <th>商品概要</th>
            <th>日</th>
            <th>月</th>
            <th>火</th>
            <th>水</th>
            <th>木</th>
            <th>金</th>
            <th>土</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>商品A</th>
            <td>商品概要</td>
            <td>20</td>
            <td>58</td>
            <td>40</td>
            <td>14</td>
            <td>38</td>
            <td>20</td>
            <td>40</td>
        </tr>
        <tr>
            <th>商品B</th>
            <td>商品概要</td>
            <td>10</td>
            <td>14</td>
            <td>58</td>
            <td>80</td>
            <td>70</td>
            <td>90</td>
            <td>20</td>
        </tr>
        <tr>
            <th>商品C</th>
            <td>商品概要</td>
            <td>10</td>
            <td>14</td>
            <td>58</td>
            <td>80</td>
            <td>70</td>
            <td>90</td>
            <td>20</td>
        </tr>
        <tr>
            <th>商品D</th>
            <td>商品概要</td>
            <td>10</td>
            <td>14</td>
            <td>58</td>
            <td>80</td>
            <td>70</td>
            <td>90</td>
            <td>20</td>
        </tr>
        <tr>
            <th>商品E</th>
            <td>商品概要</td>
            <td>10</td>
            <td>14</td>
            <td>58</td>
            <td>80</td>
            <td>70</td>
            <td>90</td>
            <td>20</td>
        </tr>
    </tbody>
</table>

 

2.headタグ内のwindow.onload=function()の関数は、丸ごと削除して、以下のvbar_graphという関数を追記してください。

※sample_graph_vbar_4.htmlでは「window.onload」で実行していますが、今回は関数化してbodyのonloadで読み込むことにしました。これは後々複数のグラフを表示する際、imgタグのonloadなどでも対応できるようにするためです。

<script type="text/javascript">
function vbar_graph(table_id, output_id, title_num, value_start_num, value_end_num, x_title, y_title){
   
    /*初期化*/
    var get_tr_array = new Array();
    var get_table_innerTag = new Array();
    var items = new Array();
    var x_title_array = new Array();
    var y_title_array = new Array();
   
    /*表のパラメータを取得*/
    graph_table = document.getElementById(table_id);
    get_tr_array = graph_table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
   
    for(i=0; i<get_tr_array.length; i++){
        get_table_innerTag = get_tr_array[i].getElementsByTagName("*");
       
        items[i] = new Array();
        items[i][0] = get_table_innerTag[title_num].innerHTML;
       
        num = 1;
        for(j=value_start_num; j<=value_end_num; j++){
            items[i][num] = parseInt(get_table_innerTag[j].innerHTML);
            num++;
        }
    }
   
    /*表のX軸・Y軸項目を取得*/
    //配列をリセットする
    delete get_tr_array;
    delete get_table_innerTag;
   
    //X軸
    x_title_array[0] = x_title;
    get_tr_array = graph_table.getElementsByTagName("thead")[0].getElementsByTagName("tr");
    get_table_innerTag = get_tr_array[0].getElementsByTagName("*");
   
    num = 1;
    for(j=value_start_num; j<=value_end_num; j++){
        x_title_array[num] = get_table_innerTag[j].innerHTML;
        num++;
    }
   
    //Y軸
    y_title_array[0] = y_title;
   

    /*グラフ出力*/
    var g = new html5jp.graph.vbar(output_id);
    if( ! g ) { return; }
    var params = {
        x: x_title_array,
        y: y_title_array,
        barShape: "line"
    };
    g.draw(items, params);
};
</script>

 

3.bodyタグは以下のように「onload="vbar_graph('graph', 'sample',0, 2, 8, '曜日', '注文数(個)')"」を実行するように記述してください。

<body onload="vbar_graph('graph', 'sample', 0, 2, 8, '曜日', '注文数(個)')">

※vbar_graph関数の引数について
function vbar_graph(table_id, output_id, title_num, value_start_num, value_end_num, x_title, y_title)

  • table_id:パラメータが入っているtableタグのID(今回の例では「graph」)
  • output_id:グラフ出力先のcanvasタグのID(今回の例では「sample」)
  • title_num:「項目名」が入っている、テーブルの列番号(今回の例では1列目)
  • value_start_num:「値(数値)」が入っている、テーブルの開始列番号(今回の例では3列目)
  • value_end_num:「値(数値)」が入っている、テーブルの終了列番号(今回の例では9列目)
  • x_title:グラフX軸の項目名(今回は「曜日」)
  • y_title:グラフY軸の項目名(今回は「注文数(個)」)

列番号について:javascriptでは一番始めが0になるので、1列目は「0」、3列目は「2」、9列目は「8」になります。

以上でサンプルの様に表示されます。(サンプルではテーブルがしょぼかったので少しスタイルを追加しています)

サンプル [新しいウィンドウで開く]

ざっくりと改造なので粗があるかもしれませんが、ご了承ください。

HTML5で円グラフを表示する(Canvas)

※追記:グラフ出力について考慮されていなかったので、引数にoutput_idを付け足しました。(2010.07.21)

HTML5のCanvasを利用すると、円グラフを表示することができます。(Javascriptが必要ですが)

やり方はこちら JavaScript ライブラリー - HTML5.JP

上記のサイトから「graph_circle_1_0_2.zip」をダウンロードして解凍すると、フォルダの中に「examples」フォルダがありますので、その中のサンプルを実行してみてください。円グラフが表示されるかと思います。

ただこのサンプルでは、スクリプト内に直接パラメータを配列で入力しなくてはなりません。

var items = [
    ["sample01", 150],
    ["sample02", 100],
    ["sample03", 80],
    ["sample04", 60],
    ["sample05", 30],
    ["sample06", 20],
    ["sample07", 10],
    ["sample08", 10],
    ["sample09", 10],
    ["sample10", 10],
    ["sample11", 10],
    ["sample12", 10]
];

これはちょっと面倒。

てことで、tableに入れたパラメータを吸い出してグラフ化するように変更しました。

とはいえ、jsファイルを直接変更する必要はありません。

あくまでhtmlファイルの中に記述するスクリプトを編集しただけです。今回は「sample_graph_circle_1.html」を改良して使用しました。(まずはサンプルを見たい方はこちら

 

手順

1.bodyタグ内に、パラメータが入ったテーブルを記述してください。

※tableタグにid="graph"を忘れずに記述してください。

tbodyタグを忘れないよう注意してください。(thead内のデータはグラフに影響を与えません。)

<table id="graph">
    <caption>アンケート結果</caption>
    <thead>
        <tr>
            <th>項目名</th>
            <th>概要</th>
            <th>値</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>sample01</th>
            <td>description</td>
            <td>150</td>
        </tr>
        <tr>
            <th>sample02</th>
            <td>description</td>
            <td>100</td>
        </tr>
        <tr>
            <th>sample03</th>
            <td>description</td>
            <td>80</td>
        </tr>
        <tr>
            <th>sample04</th>
            <td>description</td>
            <td>60</td>
        </tr>
        <tr>
            <th>sample05</th>
            <td>description</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

※「sample_graph_circle_1.html」は「sample12」までありますが、今回は「sample05」までにしました。

 

2.headタグ内のwindow.onload=function()の関数は、丸ごと削除して、以下のcircle_graphという関数を追記してください。

※sample_graph_circle_1.htmlでは「window.onload」で実行していますが、今回は関数化してbodyのonloadで読み込むことにしました。これは後々複数のグラフを表示する際、imgタグのonloadなどでも対応できるようにするためです。

<script type="text/javascript">
function circle_graph(table_id, output_id, title_num, value_num){
    //初期化
    var get_tr_array = new Array();
    var get_table_innerTag = new Array();
    var items = new Array();
   
    //パラメータを取得
    graph_table = document.getElementById(table_id);
    get_tr_array = graph_table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");

    for(i=0; i<get_tr_array.length; i++){
        get_table_innerTag = get_tr_array[i].getElementsByTagName("*");
      
        get_title = get_table_innerTag[title_num].innerHTML;
        get_value = parseInt(get_table_innerTag[value_num].innerHTML);
      
        items[i] = [get_title, get_value];
    }
   
    //グラフ出力
    var cg = new html5jp.graph.circle(output_id);
    if(!cg) { return; }

    cg.draw(items);
}
</script>

 

3.bodyタグは以下のように「onload="circle_graph('graph', 'sample', 0, 2)"」を実行するように記述してください。

<body onload="circle_graph('graph', 'sample', 0, 2)">

※circle_graph関数の引数について
circle_graph(table_id, output_id, title_num, value_num);

  • table_id:パラメータが入っているtableタグのID(今回の例では「graph」)
  • output_id:グラフ出力先のcanvasタグのID(今回の例では「sample」)
  • title_num:「項目名」が入っている、テーブルの列番号(今回の例では1列目)
  • value_num:「値(数値)」が入っている、テーブルの列番号(今回の例では3列目)

 列番号について:javascriptでは一番始めが0になるので、1列目は「0」、3列目は「2」になります。

以上でサンプルの様に表示されます。(サンプルではテーブルがしょぼかったので少しスタイルを追加しています。)

サンプル [新しいウィンドウで開く]

ざっくりと改造なので粗があるかもしれませんが、ご了承ください。

Copyright(c) 2010 - 2017 ダリの雑記