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

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

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

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

答え A, B

canvas要素にドラッグ・アンド・ドロップされた画像ファイルを読み込んだタイミングでcanvas要素に書き出し、次にcanvas要素にある画像をimg要素にも書き出しています。
ファイルの読み込み、canvas要素への書き出し、img要素への書き出し、いずれもData URLの形で扱うことができます。

出題範囲の詳細

例題解説の提供:
LPI-Japanプラチナスポンサー NECソリューションイノベータ株式会社
武藤 周 氏

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

このページの先頭へ