キャンバスの実装
本チュートリアルでは、メインのインタフェースは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_id
をmain_canvas
、キャンバスの幅と高さをそれぞれ720x750
として設定しています。このcanvas_id
は、後ほどJavaScriptで対象キャンバスを指定する際に必要となります。