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

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

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

例題3.7「2.3.1 Canvas(2D)」
レベル2の出題範囲「2.3.1 Canvas(2D)」からの出題です。
以下のHTMLとJavaScriptを表示した結果、表示される矩形の色を選択しなさい。
<html lang="ja"> <body> <canvas id="cv" width="300" height="300"></canvas> <script type="text/javascript"> var cv = document.getElementById('cv'); var ctx = cv.getContext('2d'); ctx.fillStyle = 'red'; ctx.save(); ctx.fillStyle = 'green'; ctx.save(); ctx.fillStyle = 'blue'; ctx.restore(); ctx.fillRect(20,20,50,50); </script> </body> </html>
  • red
  • green
  • blue
  • black

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

答え B
2.3.1 Canvas(2D) のsave/restoreに関する出題です。
CanvasのAPIでは、線の幅や色や塗り潰しの色など様々な属性の値を保存しておき、あとで復元させることができます。
この保存と復元はスタックと呼ばれる仕組みで実現されているため、save()メソッドでは状態を順に積むかたちで保存していきます。
restore()メソッドで復元する際には、最後に保存した状態から遡る順番でしか復元できません。

save()メソッドによる保存の内容を順に見ていくと、
1. fillStyle = 'red';
2. fillStyle = 'green';
となり、restore()メソッドは一度だけ実行されているため、ひとつ前の2.の状態が復元されます。

繰り返し処理の中で一部だけ表示スタイルを変えたい場合などに有効な機能といえるでしょう。

出題範囲の詳細

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

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

このページの先頭へ