• このエントリーをはてなブックマークに追加

HTML5プロフェッショナル認定試験レベル2 サンプル問題

2.3 グラフィックス に関する問題

例題3.3「2.3.1 Canvas(2D)」
レベル2の出題範囲「2.3.1 Canvas(2D)」からの出題です。
指定したCanvasの左から10px,上から20pxの場所に幅100px,高さ150pxの矩形の枠線を描画するために[script]に記述するべきスクリプトを選択しなさい。
<canvas id="cv" width="300" height="300"></canvas> <script> var canvas = document.getElementById('cv'); var context = canvas.getContext('2d'); [script] </script>
  • context.rect(10,20,100,150);
  • context.fillRect(10,20,100,150);
  • context.strokeRect(10,20,100,150);
  • context.stroke(10,20,100,150);
  • context.fill(10,20,100,150);

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答え C

Canvasを使用して矩形の枠線を描画する最も簡単な方法は、strokeRectメソッドを使用することです。
引数はstrokeRect(x,y,w,h)という形で、x,yで矩形の左上の座標を、w,hでそれぞれ矩形の幅と高さを指定します。
色や線の太さを替える場合はstrokeStyleプロパティを使用してstrokeRectメソッドの前に指定する必要があります。

その他の選択肢については、
A,D,Eはパス機能で描画する際に使用するメソッドになります。
それぞれ、

  • rectは指定した位置、大きさの矩形をパスに追加するメソッド。
  • strokeはパスの外形線を描画するメソッド。
  • fillはパスを塗り潰すメソッド。
となります。
BはstrokeRectメソッド同様、パスを使用せずに矩形を描画しますが、枠線ではなく、矩形全体を塗り潰します。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題解説とその内容については、例題提供者の監修です。内容や試験問題に関わるお問い合わせにつきましては、LPI事務局ではお応えできませんのでご了承ください。
例題解説のご提供者さまを募集中です。LPI-Japan事務局までぜひご投稿ください。選ばれた方の例題解説は本サイトに掲載させていただきます。

このページの先頭へ