View on GitHub

キャンバスの実装

Home

キャンバスの実装

本チュートリアルでは、メインのインタフェースはHTML5 Canvasで実装することにします。インタフェースのメインの描画領域となるキャンバスを実装しましょう。まずは、index.htmlに記述してあったrecsys-djangoへようこそ!の部分を下記のように書き換えてください。

リスト1: recsys_django/online/templates/index.html

...(略)...
    <div class="col-md-12 text-center">
        <canvas id="main_canvas" width="720" height="750"></canvas>     <!-- 修正 -->
    </div>
...(略)...

このコードでは、描画領域となるcanvas要素を定義しています。ここでは、キャンバスを特定するためのcanvas_idmain_canvas、キャンバスの幅と高さをそれぞれ720x750として設定しています。このcanvas_idは、後ほどJavaScriptで対象キャンバスを指定する際に必要となります。