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

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

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

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

例題3.8「2.3.1 Canvas(2D)」
レベル2の出題範囲「2.3.1 Canvas(2D)」からの出題です。
CanvasのAPIでglobalCompositeOperation属性の初期値として正しいものを選択しなさい。
  • source-atop
  • source-in
  • source-out
  • source-over
  • destination-over

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

答えはこちら

例題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プロフェッショナル認定試験とは異なります。

答えはこちら

例題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プロフェッショナル認定試験とは異なります。

答えはこちら

例題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プロフェッショナル認定試験とは異なります。

答えはこちら

例題3.4「2.3.1 Canvas(2D)」
レベル2の出題範囲「2.3.1 Canvas(2D)」からの出題です。
次のコードをブラウザで表示させた時の動作として正しいものを全て選択しなさい。
<html lang="ja"> <head> </head> <body> <canvas id="cvs" style="border:1px solid gray"></canvas> <img id="img" style="border:1px solid gray"> <script type="text/javascript"> var canvas = document.getElementById("cvs"); var ctx = canvas.getContext("2d"); var img = document.getElementById("img"); var saveCanvas = function(){ img.src = canvas.toDataURL(); }; var load = new Image(); var loadImg = function(){ canvas.setAttribute("height", load.height); canvas.setAttribute("width", load.width); ctx.drawImage(load, 0, 0); saveCanvas(); }; load.onload = loadImg; var dragover = function(e) { e.stopPropagation(); e.preventDefault(); } canvas.addEventListener("dragover", dragover, true); var handleFile = function(file){ var reader = new FileReader(); reader.onloadend = function(e) { load.src = e.target.result; }; reader.readAsDataURL(file); }; var drop = function(e) { var dt = e.dataTransfer; var files = dt.files; e.stopPropagation(); e.preventDefault(); if(files.length){ for (var i = 0; i < files.length; i++) { var file = files[i]; handleFile(file); } } }; canvas.addEventListener("drop", drop, true); </script> </body> </html>
  • canvas要素にドラッグ・アンド・ドロップされた画像ファイルがcanvas要素に表示される。
  • canvasに表示された画像は、img要素にも同じものが表示される。
  • img要素にドラッグ・アンド・ドロップされた画像ファイルがimg要素に表示される。
  • img要素に表示された画像は、canvas要素にも同じものが表示される。

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

答えはこちら

例題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プロフェッショナル認定試験とは異なります。

答えはこちら

例題3.2「2.3.1 Canvas(2D)」
レベル2の出題範囲「2.3.1 Canvas(2D)」からの出題です。
次のコードをブラウザで表示させた時の動作として正しいものを全て選択しなさい。
<html lang="ja"> <head> </head> <body> <canvas id="cvs" style="border:1px solid gray"></canvas> <img id="img" style="border:1px solid gray"> <script type="text/javascript"> var canvas = document.getElementById("cvs"); var ctx = canvas.getContext("2d"); var img = document.getElementById("img"); var saveCanvas = function(){ img.src = canvas.toDataURL(); }; var load = new Image(); var loadImg = function(){ canvas.setAttribute("height", load.height); canvas.setAttribute("width", load.width); ctx.drawImage(load, 0, 0); saveCanvas(); }; load.onload = loadImg; var dragover = function(e) { e.stopPropagation(); e.preventDefault(); } canvas.addEventListener("dragover", dragover, true); var handleFile = function(file){ var reader = new FileReader(); reader.onloadend = function(e) { load.src = e.target.result; }; reader.readAsDataURL(file); }; var drop = function(e) { var dt = e.dataTransfer; var files = dt.files; e.stopPropagation(); e.preventDefault(); if(files.length){ for (var i = 0; i < files.length; i++) { var file = files[i]; handleFile(file); } } }; canvas.addEventListener("drop", drop, true); </script> </body> </html>
  • canvas要素にドラッグ・アンド・ドロップされた画像ファイルがcanvas要素に表示される。
  • canvasに表示された画像は、img要素にも同じものが表示される。
  • img要素にドラッグ・アンド・ドロップされた画像ファイルがimg要素に表示される。
  • img要素に表示された画像は、canvas要素にも同じものが表示される。

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

答えはこちら

例題3.1「2.3.2 SVG」
レベル2の出題範囲「2.3.2 SVG」からの出題です。
SVGの利用方法について、正しい記述を全て選択しなさい。
  • img要素のsrc属性に利用できる。
  • canvas要素のsrc属性に利用できる。
  • svg要素の中で子要素としてsvg要素を記述できる。
  • svg要素の中でスクリプトの記述やイベントハンドリングができる。

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

答えはこちら

このページの先頭へ