HTML5プロフェッショナル認定試験レベル2 例題解説

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

2.3 グラフィックス・アニメーション

例題3.12「2.3.1 Canvas(2D)」
レベル2の出題範囲「2.3.1 Canvas(2D)」からの出題です。
Canvasの保存に利用可能なsaveおよびrestoreメソッドについて正しいものを選択せよ。
  • saveメソッドを使うことで、Canvasの状態をlocalStorageに保存することができる
  • restoreメソッドで、ユーザーが指定したデータを書き戻すことができる
  • saveメソッドで、ユーザーにCanvasのデータを画像ファイルとしてダウンロードさせることができる
  • restoreメソッドを呼ぶことで、saveメソッドで保存したデータを書き戻すことができる

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2020年4月30日

答えはこちら

答え D
SaveメソッドはCanvasの状態を保存しますが、一時的な情報として保存されるため、永続的なデータとして保存するためには、他の方法を利用する必要があります。自動的にlocalStorageに書き込む能力は無いため、Aは間違いです。
restoreメソッドはsaveメソッドで保存された内容だけを戻すことができるため、ユーザーが指定したデータを戻すことはできません。そのため、Bは間違いです。
Saveメソッドでは画像として保存させることはできません。getImageDataメソッドを利用することで、画像を取得することができます。
Dは正しく説明されています。但し、restoreメソッドでは1回実行すると1回だけ遡って状態を復元します。

出題範囲の詳細

例題解説の提供：株式会社クリーク・アンド・リバー社
関口　和真 氏

例題3.11「2.3.2 SVG」
レベル2の出題範囲「2.3.2 SVG」からの出題です。
SVG形式の説明として正しいものをすべて選択しなさい。
  • ベクトルデータのみを扱うことができる
  • 単体でアニメーションをさせることができる
  • 画像編集ソフトでのみ編集が可能である
  • CSSを利用して見た目を変更することができる

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

答えはこちら

答え B、D
SVGは内部にJPEGやPNGなどのビットマップ画像データを保持することが可能です。その場合は、ビットマップ画像部分については拡大してもジャギーが生じないSVGの特徴は失われます。
SVGは内部にアニメーションをするための記述を行うことが可能で、単体でアニメーションをさせることが可能です。
SVG自体はXMLファイルであるため、エディターで編集が可能です。ただし、圧縮されている場合、エディターでの編集は難しくなります。
SVGは内部の要素の色などはCSSによって定義することが可能であり、外部のCSSファイルを利用して変更することも可能です。

出題範囲の詳細

例題解説の提供：株式会社クリーク・アンド・リバー社
関口　和真 氏

例題3.10「2.3.1 Canvas(2D)」
レベル2の出題範囲「2.3.1 Canvas(2D)」からの出題です。
Canvas内の左上に合わせて画像ファイルを表示する場合に以下のコードの中にある、[　script　]に記述するべき正しいコードを選択しなさい。

<canvas id="cv" width="300" height="300"></canvas>

<script>
var canvas = document.getElementById('cv');
var context = canvas.getContext('2d');
var image = new Image();
image.src = “sample01.jpg”;
image.onload = function(){
[　script　]
}
</script>
  • context.loadImage(image,0,0,image.width,image.height);
  • context.drawImage(image,image.width,image.height,0,0);
  • context.createImageData(image.width,image.height);
  • context.drawImage(image,0,0, image.width,image.height);

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

答えはこちら

答え D
JCanvasにはloadImageというメソッドは存在しないため、Aはエラーとなります。Bは画像を読み出すコードとしては正しいのですが、配置されるのが画像の幅サイズ、高さサイズの場所で、横幅サイズが0，高さサイズが0の画像として表示されてしまいます。指定する引数の順番が違っています。
createImageDataは新規にImageDataオブジェクトを生成するメソッドのため、これ自体に画像を表示するための仕組みはありません。
Dは正しいコードです。このうち、0,0は表示を開始する位置を示します。

出題範囲の詳細

例題解説の提供：株式会社クリーク・アンド・リバー社
関口　和真 氏

例題3.9「2.3.3 Timing control for script-based animations」
レベル2の出題範囲「2.3.3 Timing control for script-based animations」からの出題です。
requestAnimationFrameメソッドを使用したアニメーションの特徴として正しいものを全て選択して下さい。
  • アニメーションの途中の状態を取得できる
  • Webページが次に再描画される前に指定したコールバック関数が実行される
  • 指定したフレーム数になると指定した関数が実行される
  • Webブラウザのタブがアクティブでは無い場合は、更新頻度が抑制される
  • 通常のアニメーションより高精度な時間で実行される

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

答えはこちら

答え B, D
JavaScriptでアニメーションを行なう場合、jQueryなどを使うケースが多いですが、それらのライブラリを使用しない場合は、これまでsetTimeOut、setTimeIntervalを使用してきました。
しかしこれらはブラウザの状態(再描画のタイミングや非アクティブなタブなど)に関わらず実行されるため、アニメーションのちらつきや、マシンパワーの浪費につながります。
requestAnimationFrameメソッドは、Webブラウザの描画タイミングに合せて、再描画が行なわれる前に指定された関数が実行されます。
Webブラウザの再描画は非アクティブなタブでは回数が減るか、行なわれないません。
そのため、再描画中にアニメーションの処理がおこなわれてチラついたり、非表示のタブで無駄に処理が行なわれることがありません。
デメリットとしては、setTimeOut,setTimeIntervalと異なり、いつ実行されるかわからないということが言えます。
関数が実行されたら現在時刻からアニメーションの内容を決定する必要があります。
その他の選択肢については、
A. 取得できません
C. フレーム数ではなく、Webブラウザの再描画のタイミングによります
E. setTimeIntervalやsetTimeOutよりも更新頻度が落ちることもありえます

出題範囲の詳細

例題解説の提供：株式会社クリーク・アンド・リバー社
HTML5レベル２認定者　高井 歩 氏

例題3.8「2.3.3 Timing control for script-based animations」
レベル2の出題範囲「2.3.3 Timing control for script-based animations」からの出題です。
アニメーションの描画において、setIntervalメソッドと比較してrequestAnimationFrameメソッドの優れている点をすべて選びなさい。
  • フレームレートをJavaScriptで制御できる。
  • 動作環境によって、適切なフレーム描画タイミングが提供される。
  • バックグラウンドでも表示時と同じフレームレートで再生される。
  • マイクロ秒スケールでの制御がより簡単にできる。

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

答えはこちら

答え B, D
requestAnimationFrameメソッドは、ブラウザが再描画するタイミングで呼ばれるコールバック関数をセットできます。
これは、setIntervalメソッドとは異なり、コールバック関数を指定時間後に呼び出す、
つまりフレームレートから計算して次に呼び出すタイミングを制御できない、
フレームレートによる描画を制御できない、ということを意味します。
また、バックグラウンドではフレームレートを下げて、CPUへの負荷を軽減しています。
従って、表示時と同じようには再生されません。
setIntervalメソッドを利用した場合には、一定時間毎に対象を描画する、という方式でしたが、requestAnimationFrameメソッドを利用した場合には、現時刻にあるべき描画を行う、という方式になります。
言い換えれば、動作環境によって適切な描画タイミングで処理できるので、無駄な動作を抑えられるようになります。
また、コールバックにはマイクロ秒スケールのタイムスタンプが引数として渡されるので、これを利用して、「その時点で描画すべき対象」を「より正確に」描くことができる、カクつきが軽減できる、ということが期待できます。
この時渡されるタイムスタンプは、Performanceオブジェクトのnowメソッドで取得できるものと同じです。

出題範囲の詳細

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

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

答えはこちら

答え D
2.3.1 Canvas(2D) のglobalCompositeOperationに関する出題です。

globalCompositeOperationは、描画する図形や画像を、既に描画されている図形や画像と合成する際に使用されます。

source-atopは対象イメージの画像が描画先イメージの領域でクリッピングされます。
source-inは対象イメージと描画先イメージの重なった領域にだけ、対象イメージが表示されます。他の領域は全て透明になります。
source-outは描画先イメージと重なっていない領域にだけ、対象イメージが表示されます。他の領域は全て透明になります。
source-overはglobalCompositeOperationの初期値で、対象イメージが既存のイメージの手前に表示されます。
destination-overは対象イメージが描画先イメージより奥に表示されます。

出題範囲の詳細

例題解説の提供：株式会社クリーク・アンド・リバー社
HTML5レベル２認定者　高井 歩 氏

例題3.6「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レベル２認定者　高井 歩 氏

例題3.5「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レベル２認定者　高井 歩 氏

例題3.4「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レベル２認定者　高井 歩 氏

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

答えはこちら

答え C

Canvasを使用して矩形の枠線を描画する最も簡単な方法は、strokeRectメソッドを使用することです。
引数はstrokeRect(x,y,w,h)という形で、x,yで矩形の左上の座標を、w,hでそれぞれ矩形の幅と高さを指定します。
色や線の太さを替える場合はstrokeStyleプロパティを使用してstrokeRectメソッドの前に指定する必要があります。

その他の選択肢については、
A,D,Eはパス機能で描画する際に使用するメソッドになります。
それぞれ、

  • rectは指定した位置、大きさの矩形をパスに追加するメソッド。
  • strokeはパスの外形線を描画するメソッド。
  • fillはパスを塗り潰すメソッド。

となります。
BはstrokeRectメソッド同様、パスを使用せずに矩形を描画しますが、枠線ではなく、矩形全体を塗り潰します。

出題範囲の詳細

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

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

答えはこちら

答え A, B

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

出題範囲の詳細

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

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

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

答えはこちら

答え A,C,D

canvas要素にはsrc属性は存在しません。
svg要素内にscript要素が記述でき、そこに処理を記述できます。
また、svg内の要素にはonclickなどのイベントハンドラが備わっており、そこに処理を記述することも可能です。

出題範囲の詳細

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

メルマガ登録E-mail Magazine

受験を決めたら、まずメルマガ登録。
学習に役立つ例題解説付きメールマガジンを定期発行

氏名

ご提供いただく個人情報の取り扱いについて

ご提供いただいた情報につきましては、当団体内において管理し第三者には開示いたしません。 ご提供いただいた情報につきましては、当団体のオープンソース普及／促進活動のための統計データに反映し、Linux技術者認定事業サービスの充実に活用させて頂くとともに、当団体からの最新情報やイベント情報のご案内を差上げる目的に利用させていただきます。 当団体のプライバシーポリシーについてはこちらをご参照ください。

メルマガ登録する