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

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

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

例題3.6「2.3.1 Canvas(2D)」
レベル2の出題範囲「2.3.1 Canvas(2D)」からの出題です。
以下のスクリプトの実行結果において、1つめの矩形に対して2つめの矩形はどのように描画されるか。正しいものを選択しなさい。
<html lang="ja"> <head> </head> <body> <canvas id="cv1" width="300" height="300"></canvas> <script type="text/javascript"> var cv1 = document.getElementById('cv1'); var ctx1 = cv1.getContext('2d'); ctx1.strokeRect(120,40,50,100); // 1つめの矩形 ctx1.rotate( 30 * Math.PI / 180 ); ctx1.fillRect(120,40,50,100); // 2つめの矩形 </script> </body> </html>
  • パスの左上を原点に時計回りに30°回転する
  • パスの左上を原点に反時計時計回りに30°回転する
  • canvas要素の左上を原点に時計回りに30°回転する
  • canvas要素の左上を原点に反時計回りに30°回転する
  • canvas要素の中心を原点に時計回りに30°回転する

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

答え C
2.3.1 Canvas(2D) の回転(rotate)に関する出題です。
Canvasにおける変形(回転、移動、拡大縮小)はすべてcanvas要素の左上を基準にしておこなわれます。
描画するパスの一部を原点に回転したい場合などは、回転後に移動するなどの工夫が必要になります。
計算を簡単に考えるために、canvas要素の左上の角とパスの原点にしたい場所を重なるようにパスを作成したあと回転(rotate)や拡大(scale)をおこない、最後に正しい位置に移動(translate)させることもあります。

また、rotateの角度指定はラジアン(180°でπラジアン、1回転で2πラジアン)で行ない、時計回りに回転します。
n * Math.PI / 180という式は、n°の角度をラジアンに変換する式として良く使用されるので覚えておくと良いでしょう。

したがって、canvas要素の左上を原点に時計周りに30°回転する、Cが正解になります。

出題範囲の詳細

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

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

このページの先頭へ