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

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

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

例題3.5「2.3.1 Canvas(2D)」
レベル2の出題範囲「2.3.1 Canvas(2D)」からの出題です。
以下のHTMLとJavaScriptを表示した結果、おなじ表示内容になる要素のID属性の組み合わせを選択しなさい。
<html lang="ja"> <head> </head> <body> <canvas id="cv1" width="300" height="300"></canvas> <canvas id="cv2" width="300" height="300"></canvas> <canvas id="cv3" width="300" height="300"></canvas> <canvas id="cv4" width="300" height="300"></canvas> <script type="text/javascript"> var cv1 = document.getElementById('cv1'); var ctx1 = cv1.getContext('2d'); ctx1.strokeRect(20,40,50,100); var cv2 = document.getElementById('cv2'); var ctx2 = cv2.getContext('2d'); ctx2.beginPath(); ctx2.moveTo(20,40); ctx2.lineTo(50,40); ctx2.lineTo(50,100); ctx2.lineTo(20,100); ctx2.closePath(); ctx2.stroke(); var cv3 = document.getElementById('cv3'); var ctx3 = cv3.getContext('2d'); ctx3.beginPath(); ctx3.moveTo(20,40); ctx3.lineTo(70,40); ctx3.lineTo(70,140); ctx3.lineTo(20,140); ctx3.closePath(); ctx3.stroke(); var cv4 = document.getElementById('cv4'); var ctx4 = cv4.getContext('2d'); ctx4.beginPath(); ctx4.moveTo(20,40); ctx4.lineTo(70,40); ctx4.lineTo(70,140); ctx4.lineTo(20,140); ctx4.stroke(); </script> </body> </html>
  • cv1とcv2、cv3とcv4
  • cv1とcv2
  • cv1とcv3とcv4
  • cv1とcv3

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

答え D
2.3.1 Canvas(2D)のクローズパスとオープンパスについての出題です。

strokeRect()メソッドは始点の座標と幅、高さを指定して矩形の辺を描画します。
対して、パスの描画では、beginPath()で新規にパスを作成したあと、パスを構成する直線や曲線などを追加します。
パスを作成したあと、パスを線で描画するstroke()メソッドや塗り潰しを行なうfill()メソッドで描画を行ないます。

パスにはクローズパスとオープンパスがあり、パスの最後に始点と繋ぎ閉じたパスを作成するclosePath()メソッドを使用することで、クローズパスを作成できます。

出題ではcv2,cv3のクローズパスでは矩形が描画され、cv4のオープンパスではコの字の形に線が描画されます。
cv2は幅30px,高さ60pxになるため、cv1,cv3とは異なる大きさの矩形になります。

出題範囲の詳細

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

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

このページの先頭へ