HTML5プロフェッショナル認定試験 レベル2「グラフィックス・マルチメディア（Canvas等）」の一問一答

HTML5プロフェッショナル認定試験 レベル2のグラフィックス・マルチメディア（Canvas等）に関する一問一答（全75問）の正解と解説の一覧です。上の一問一答で実際に解いてから、ここで復習・確認できます。

1. 問1．canvas要素から2Dの描画コンテキストを取得するには、要素のgetContext("2d")メソッドを呼び出す。

   正解：○（正しい）

   解説：getContext("2d")でCanvasRenderingContext2Dオブジェクトを取得し、これを通じて描画を行う。

2. 問2．Canvasの座標系は左下を原点(0,0)とし、y軸は上方向に増加する。

   正解：×（誤り）

   解説：誤り。正しくは、Canvasの原点は左上(0,0)で、x軸は右方向、y軸は下方向に増加する。

3. 問3．fillRect(x, y, w, h)は、指定した矩形を現在のfillStyleで塗りつぶす。

   正解：○（正しい）

   解説：fillRectは指定矩形を現在のfillStyleで塗りつぶす。輪郭線はstrokeRectで描画する。

4. 問4．clearRect(x, y, w, h)は、指定した矩形領域を現在のfillStyleで塗りつぶす。

   正解：×（誤り）

   解説：誤り。正しくは、clearRectは指定矩形を透明(消去)にするメソッドで、塗りつぶしはfillRectが行う。

5. 問5．beginPath()でパスを開始し、moveTo/lineToで経路を定義してからfillやstrokeで描画する。

   正解：○（正しい）

   解説：beginPathでパスをリセットし、moveTo/lineTo等で経路を定義、fill/strokeで描画する。

6. 問6．moveTo(x, y)は現在のパスに直線を引きながらペン位置を移動する。

   正解：×（誤り）

   解説：誤り。正しくは、moveToは線を引かずにペンの開始位置を移動するだけで、線を引くのはlineToである。

7. 問7．lineTo(x, y)は、直前のパスの点から指定座標まで直線のパスを追加する。

   正解：○（正しい）

   解説：lineToは現在の点から指定点まで直線パスを追加する。実際の描画はstroke/fillで行われる。

8. 問8．arc(x, y, r, startAngle, endAngle)の角度はラジアンではなく度(degree)で指定する。

   正解：×（誤り）

   解説：誤り。正しくは、arcの角度はラジアンで指定する。例えば180度はMath.PIである。

9. 問9．closePath()は、現在のサブパスの始点と終点を直線で結んでパスを閉じる。

   正解：○（正しい）

   解説：closePathは現在のサブパスの始点へ直線を引いて閉じる。新たな描画開始ではない。

10. 問10．lineWidthは線の太さを指定するプロパティで、初期値は0である。

    正解：×（誤り）

    解説：誤り。正しくは、lineWidthの初期値は1.0であり、0ではない。

11. 問11．arc()の第6引数counterclockwiseにtrueを渡すと、円弧が反時計回りに描かれる。

    正解：○（正しい）

    解説：arcの第6引数はcounterclockwise(省略時false=時計回り)で、trueで反時計回りになる。

12. 問12．lineCapのデフォルト値は"round"であり、線の端が丸く描画される。

    正解：×（誤り）

    解説：誤り。正しくは、lineCapの初期値は"butt"(端で切る)で、他にroundとsquareがある。

13. 問13．完全な円をarc()で描くには、終了角に2*Math.PIを指定すればよい。

    正解：○（正しい）

    解説：開始角0、終了角2*Math.PI(=360度)で全周の円が描ける。半円ならMath.PI。

14. 問14．rotate(angle)の回転角は度数で指定し、回転の中心は常にCanvasの中央である。

    正解：×（誤り）

    解説：誤り。正しくは、rotateの角度はラジアンで、回転中心は現在の原点(0,0)である。

15. 問15．fillStyleには色名やRGB値のほか、グラデーションオブジェクトやパターンも設定できる。

    正解：○（正しい）

    解説：fillStyleには色文字列、CanvasGradient、CanvasPatternを設定でき、塗りに反映される。

16. 問16．setTransform()は現在の変形行列に新しい変形を乗算して累積する。

    正解：×（誤り）

    解説：誤り。正しくは、setTransformは変形行列をリセットして指定値で置き換える。乗算累積はtransformである。

17. 問17．globalAlphaに0.5を設定すると、以降の描画がすべて不透明度50%で描かれる。

    正解：○（正しい）

    解説：globalAlphaは0.0〜1.0で全体の不透明度を指定し、0.5なら半透明で描画される。

18. 問18．textAlignプロパティのデフォルト値は"center"である。

    正解：×（誤り）

    解説：誤り。正しくは、textAlignの初期値は"start"で、left・right・center・endも指定できる。

19. 問19．lineJoinは線分の接続部分の形状を指定し、miter・round・bevelの値を取る。

    正解：○（正しい）

    解説：lineJoinは線の接合形状を指定し、miter(初期値)・round・bevelが指定できる。

20. 問20．ImageDataのdata配列は、各ピクセルがR・G・Bの3要素で構成され、アルファ値は含まれない。

    正解：×（誤り）

    解説：誤り。正しくは、dataは1ピクセルあたりR・G・B・Aの4要素で構成される。

21. 問21．save()で現在の描画状態をスタックに退避し、restore()で直前に保存した状態へ復元できる。

    正解：○（正しい）

    解説：save/restoreはスタイルや変形行列などの状態をスタックで退避・復元する。

22. 問22．createImageData(w, h)は、生成したImageDataの全ピクセルを黒色(不透明)で初期化する。

    正解：×（誤り）

    解説：誤り。正しくは、createImageDataは全ピクセルが透明な黒(RGBAすべて0)で初期化される。

23. 問23．translate(x, y)は座標系の原点を(x, y)だけ平行移動する変形である。

    正解：○（正しい）

    解説：translateは原点を移動する変形で、以降の描画座標の基準が変わる。

24. 問24．quadraticCurveTo()は制御点を2つ指定する3次ベジェ曲線を描くメソッドである。

    正解：×（誤り）

    解説：誤り。正しくは、quadraticCurveToは制御点1つの2次ベジェ曲線で、制御点2つの3次はbezierCurveTo。

25. 問25．scale(2, 2)を適用すると、以降の描画がx・y方向ともに2倍に拡大される。

    正解：○（正しい）

    解説：scale(2,2)はx・y方向の拡大率を2倍にし、線幅も含めて拡大される。

26. 問26．requestAnimationFrameは一度登録すると、明示的に停止しなくても自動で繰り返し呼ばれ続ける。

    正解：×（誤り）

    解説：誤り。正しくは、requestAnimationFrameは1回限りの呼び出しで、ループにはコールバック内での再登録が必要。

27. 問27．fillText(text, x, y)は指定位置にテキストを塗りで描画し、strokeTextは輪郭線で描画する。

    正解：○（正しい）

    解説：fillTextは塗りつぶし文字、strokeTextは輪郭線文字を描画する。

28. 問28．requestAnimationFrameはタブが非アクティブになっても、setIntervalと同様の頻度で動作し続ける。

    正解：×（誤り）

    解説：誤り。正しくは、タブが非アクティブだとrequestAnimationFrameは停止または間引かれ、無駄な描画を抑える。

29. 問29．measureText(text)はTextMetricsオブジェクトを返し、widthプロパティでテキスト幅を取得できる。

    正解：○（正しい）

    解説：measureTextは描画予定テキストの寸法を返し、widthで横幅を取得できる。

30. 問30．audio要素のvolumeプロパティは0(無音)から100(最大)の範囲で音量を指定する。

    正解：×（誤り）

    解説：誤り。正しくは、volumeは0.0(無音)〜1.0(最大)の範囲で指定する。

31. 問31．ctx.fontプロパティはCSSのfontショートハンドと同じ書式で指定する。

    正解：○（正しい）

    解説：fontは"bold 20px sans-serif"のようにCSSのfontと同じ書式で指定する。

32. 問32．メディアの再生が末尾まで達して停止したときに発火するイベントはloadedmetadataである。

    正解：×（誤り）

    解説：誤り。正しくは、再生終了時はendedイベントが発火する。loadedmetadataはメタデータ読込完了時。

33. 問33．drawImage()の引数には、img要素のほか別のcanvas要素やvideo要素も指定できる。

    正解：○（正しい）

    解説：drawImageはHTMLImageElement・HTMLCanvasElement・HTMLVideoElement等を描画元にできる。

34. 問34．video要素のdurationプロパティは負の値を返すことで、メディアの長さが不明であることを示す。

    正解：×（誤り）

    解説：誤り。正しくは、長さ不明やメタデータ未読込時はNaNを返し、負の値ではない。

35. 問35．getImageData(x, y, w, h)は指定領域のピクセル情報をImageDataオブジェクトとして取得する。

    正解：○（正しい）

    解説：getImageDataは指定矩形のピクセルをImageData(data配列にRGBA)として返す。

36. 問36．video要素のplay()メソッドを呼び出すと、メディアの再生が一時停止される。

    正解：×（誤り）

    解説：誤り。正しくは、play()は再生を開始するメソッドで、一時停止はpause()である。

37. 問37．putImageData(imageData, dx, dy)はImageDataの内容を指定位置のCanvasに書き戻す。

    正解：○（正しい）

    解説：putImageDataはImageDataを指定座標にそのまま描画(書き戻し)する。

38. 問38．strokeStyleは塗りつぶしの色を、fillStyleは線(輪郭)の描画色を指定するプロパティである。

    正解：×（誤り）

    解説：誤り。正しくは、strokeStyleが輪郭線の色、fillStyleが塗りつぶしの色を指定する。

39. 問39．createLinearGradient(x0, y0, x1, y1)は二点を結ぶ方向の線形グラデーションを生成する。

    正解：○（正しい）

    解説：createLinearGradientは始点と終点を結ぶ方向の線形グラデーションを返す。

40. 問40．cancelAnimationFrameはsetIntervalが返したIDを渡してタイマーを停止するメソッドである。

    正解：×（誤り）

    解説：誤り。正しくは、cancelAnimationFrameはrequestAnimationFrameのIDを取り消す。setIntervalの停止はclearInterval。

41. 問41．Canvasのctx.translate(50,50)後にctx.fillRect(0,0,10,10)を実行すると、矩形の左上は画面座標(50,50)に描かれる。

    • ア．画面座標(50,50)
    • イ．画面座標(0,0)
    • ウ．画面座標(60,60)
    • エ．画面座標(40,40)

    正解：ア．画面座標(50,50)

    解説：translateで原点が(50,50)へ移動するため、座標(0,0)は画面の(50,50)に対応する。

42. 問42．Canvas 2Dコンテキストを取得する正しい記述はどれか。

    • ア．canvas.create2DContext()
    • イ．canvas.getContext("2d")
    • ウ．canvas.context("2d")
    • エ．canvas.getCanvas2D()

    正解：イ．canvas.getContext("2d")

    解説：canvas要素に対してgetContext("2d")を呼ぶことで2D描画コンテキストを取得する。

43. 問43．Canvasで半径rの完全な円を描くとき、arc()の終了角に指定する値として正しいのはどれか。

    • ア．Math.PI
    • イ．Math.PI / 2
    • ウ．2 * Math.PI
    • エ．360

    正解：ウ．2 * Math.PI

    解説：全周は360度=2*Math.PIラジアンであり、開始角0から2*Math.PIで完全な円になる。

44. 問44．Canvasのctx.rotate()に渡す回転角の単位として正しいのはどれか。

    • ア．度(degree)
    • イ．パーセント
    • ウ．グラード
    • エ．ラジアン

    正解：エ．ラジアン

    解説：Canvasのrotateは角度をラジアンで受け取る。90度はMath.PI/2に相当する。

45. 問45．指定した矩形領域を透明に消去するCanvasのメソッドはどれか。

    • ア．clearRect
    • イ．fillRect
    • ウ．strokeRect
    • エ．eraseRect

    正解：ア．clearRect

    解説：clearRectは指定矩形を透明に消去する。fillRect/strokeRectは塗り/線を描く。

46. 問46．ImageDataのdata配列で、1ピクセルを表すために使われる要素数はいくつか。

    • ア．1
    • イ．4
    • ウ．3
    • エ．2

    正解：イ．4

    解説：ImageDataは1ピクセルにつきR・G・B・Aの4要素を持つため、要素数は4である。

47. 問47．線形グラデーションを生成するCanvasのメソッドはどれか。

    • ア．createPattern
    • イ．addColorStop
    • ウ．createLinearGradient
    • エ．fillGradient

    正解：ウ．createLinearGradient

    解説：createLinearGradientが線形グラデーションを生成する。放射状はcreateRadialGradient。

48. 問48．ブラウザの再描画タイミングに同期してアニメーション処理を呼び出すAPIはどれか。

    • ア．setTimeout
    • イ．setInterval
    • ウ．setImmediate
    • エ．requestAnimationFrame

    正解：エ．requestAnimationFrame

    解説：requestAnimationFrameは再描画に同期し、滑らかで効率的なアニメーションを実現する。

49. 問49．メディアの再生位置が変化するたびに発火するイベントはどれか。

    • ア．timeupdate
    • イ．loadedmetadata
    • ウ．play
    • エ．durationchange

    正解：ア．timeupdate

    解説：timeupdateは再生位置(currentTime)が更新されるたびに発火する。

50. 問50．audio要素のvolumeプロパティで指定できる値の範囲として正しいのはどれか。

    • ア．0〜255
    • イ．0.0〜1.0
    • ウ．0〜100
    • エ．-1.0〜1.0

    正解：イ．0.0〜1.0

    解説：volumeは0.0(無音)〜1.0(最大)の範囲で音量を指定する。

51. 問51．制御点を1つだけ指定する2次ベジェ曲線を描くCanvasのメソッドはどれか。

    • ア．bezierCurveTo
    • イ．arcTo
    • ウ．quadraticCurveTo
    • エ．curveTo

    正解：ウ．quadraticCurveTo

    解説：quadraticCurveToは制御点1つの2次ベジェ曲線を描く。制御点2つはbezierCurveTo。

52. 問52．Canvasの座標系における原点(0,0)の位置として正しいのはどれか。

    • ア．右上
    • イ．左下
    • ウ．中央
    • エ．左上

    正解：エ．左上

    解説：Canvasの原点は左上で、x軸は右、y軸は下方向に増加する。

53. 問53．現在の描画状態(スタイルや変形行列)をスタックに退避するCanvasのメソッドはどれか。

    • ア．save
    • イ．push
    • ウ．store
    • エ．begin

    正解：ア．save

    解説：save()が状態をスタックに退避し、restore()で復元する。

54. 問54．Canvasとimg要素(ビットマップ画像)・SVGの違いに関する説明として正しいのはどれか。

    • ア．Canvasはベクター、SVGはビットマップである
    • イ．Canvasはビットマップで拡大に弱く、SVGはベクターでDOM操作できる
    • ウ．CanvasもSVGもDOMで個別図形を操作できる
    • エ．SVGはJavaScriptから操作できない

    正解：イ．Canvasはビットマップで拡大に弱く、SVGはベクターでDOM操作できる

    解説：Canvasはビットマップでスクリプト描画、SVGはベクターでDOM操作可能という違いがある。

55. 問55．requestAnimationFrameが返したIDを使ってアニメーションを停止するメソッドはどれか。

    • ア．clearAnimationFrame
    • イ．stopAnimationFrame
    • ウ．cancelAnimationFrame
    • エ．clearInterval

    正解：ウ．cancelAnimationFrame

    解説：cancelAnimationFrameにrequestAnimationFrameの戻り値IDを渡して予約を取り消す。

56. 問56．ctx.fillStyle = "red" の後に ctx.fillStyle = "blue" を設定し、fillRectを実行した。描画される塗り色はどれか。

    • ア．赤
    • イ．黒(初期値)
    • ウ．紫(混色)
    • エ．青

    正解：エ．青

    解説：fillStyleは後から設定した値が有効となるため、塗り色は青(blue)になる。

57. 問57．ctx.scale(2, 3) を適用した場合の拡大率として正しいのはどれか。

    • ア．x方向2倍・y方向3倍
    • イ．x方向3倍・y方向2倍
    • ウ．x・yともに6倍
    • エ．x・yともに2.5倍

    正解：ア．x方向2倍・y方向3倍

    解説：scale(2,3)はx方向2倍、y方向3倍に拡大する変形である。

58. 問58．現在の変形行列をリセットして指定値で完全に置き換えるCanvasのメソッドはどれか。

    • ア．transform
    • イ．setTransform
    • ウ．resetTransform
    • エ．applyTransform

    正解：イ．setTransform

    解説：setTransformは行列をリセットして置換する。transformは既存行列に乗算累積する。

59. 問59．JavaScriptからメディアストリームを動的に生成しvideo要素へ供給する仕組みはどれか。

    • ア．Web Audio API
    • イ．WebRTC
    • ウ．Media Source Extensions(MSE)
    • エ．WebGL

    正解：ウ．Media Source Extensions(MSE)

    解説：Media Source Extensions(MSE)はJSでメディアを組み立てて供給し、適応ストリーミングを可能にする。

60. 問60．ctx.beginPath(); ctx.moveTo(10,10); ctx.lineTo(50,10); の後、線を実際に表示するために必要な呼び出しはどれか。

    • ア．ctx.closePath()
    • イ．ctx.show()
    • ウ．ctx.draw()
    • エ．ctx.stroke()

    正解：エ．ctx.stroke()

    解説：パスを定義しただけでは描画されず、stroke()を呼ぶことで線が表示される。

61. 問61．テキストの水平方向の揃え位置を指定するCanvasのプロパティはどれか。

    • ア．textAlign
    • イ．textBaseline
    • ウ．textPosition
    • エ．align

    正解：ア．textAlign

    解説：textAlignが水平方向の揃え(start/end/left/right/center)を指定する。垂直はtextBaseline。

62. 問62．video要素を一時停止状態から再生する正しい記述はどれか。

    • ア．video.start()
    • イ．video.play()
    • ウ．video.resume()
    • エ．video.run()

    正解：イ．video.play()

    解説：video.play()で再生を開始する。pause()は一時停止である。

63. 問63．Canvasのctx.globalAlpha = 0.5 を設定した状態で描画した場合の効果として正しいのはどれか。

    • ア．描画が2倍の濃さになる
    • イ．背景色が変わる
    • ウ．以降の描画が不透明度50%になる
    • エ．線幅が半分になる

    正解：ウ．以降の描画が不透明度50%になる

    解説：globalAlpha=0.5は以降の描画を不透明度50%(半透明)にする。

64. 問64．AudioContextを起点にノードを接続して音声を合成・加工するAPIはどれか。

    • ア．Canvas Audio
    • イ．Media Source Extensions
    • ウ．HTML Media Capture
    • エ．Web Audio API

    正解：エ．Web Audio API

    解説：Web Audio APIはAudioContext上でノードグラフを組み、音声生成・加工を行う。

65. 問65．lineCapプロパティの初期値として正しいのはどれか。

    • ア．butt
    • イ．square
    • ウ．round
    • エ．miter

    正解：ア．butt

    解説：lineCapの初期値はbuttで、線端を切り落とす。他にround・squareがある。

66. 問66．drawImageメソッドの引数として指定できないものはどれか。

    • ア．HTMLImageElement
    • イ．画像URLの文字列
    • ウ．HTMLVideoElement
    • エ．HTMLCanvasElement

    正解：イ．画像URLの文字列

    解説：drawImageはimg/canvas/video等を描画元にできるが、文字列(URL)を直接は渡せない。

67. 問67．ImageDataの内容を指定座標へCanvasに書き戻すメソッドはどれか。

    • ア．getImageData
    • イ．drawImageData
    • ウ．putImageData
    • エ．setImageData

    正解：ウ．putImageData

    解説：putImageDataはImageDataを指定位置にそのまま描画(書き戻し)する。

68. 問68．ctx.rotate(Math.PI) を適用した場合の回転量として正しいのはどれか。

    • ア．45度
    • イ．90度
    • ウ．360度
    • エ．180度

    正解：エ．180度

    解説：Math.PIラジアンは180度に相当するため、180度の回転となる。

69. 問69．メディアの長さや寸法などのメタデータが利用可能になった時点で発火するイベントはどれか。

    • ア．loadedmetadata
    • イ．canplay
    • ウ．ended
    • エ．timeupdate

    正解：ア．loadedmetadata

    解説：loadedmetadataはメタデータ読込完了で発火し、この時点でdurationが取得可能になる。

70. 問70．描画予定テキストの幅を取得するために使うCanvasのメソッドはどれか。

    • ア．getTextWidth
    • イ．measureText
    • ウ．textWidth
    • エ．calcText

    正解：イ．measureText

    解説：measureTextはTextMetricsを返し、そのwidthでテキスト幅を取得できる。

71. 問71．新しい描画と既存内容の合成方法を指定するCanvasのプロパティはどれか。

    • ア．globalAlpha
    • イ．blendMode
    • ウ．globalCompositeOperation
    • エ．compositeStyle

    正解：ウ．globalCompositeOperation

    解説：globalCompositeOperationがsource-over等の合成モードを指定する。

72. 問72．メディアの音量設定値を保持したまま無音にするために使うプロパティはどれか。

    • ア．volume = 0
    • イ．pause()
    • ウ．silent = true
    • エ．muted = true

    正解：エ．muted = true

    解説：mutedをtrueにするとvolumeの値を保持したままミュートできる。

73. 問73．drawImageの9引数形式 drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh) における sx, sy, sw, sh が表すものはどれか。

    • ア．元画像の切り出し矩形
    • イ．描画先の矩形
    • ウ．拡大率
    • エ．回転角度

    正解：ア．元画像の切り出し矩形

    解説：9引数版の前半sx,sy,sw,shは元画像からの切り出し(ソース)矩形、後半が描画先矩形。

74. 問74．createImageData(w, h) で生成されるImageDataの初期状態として正しいのはどれか。

    • ア．全ピクセルが不透明な黒
    • イ．全ピクセルが透明(RGBA全て0)
    • ウ．全ピクセルが不透明な白
    • エ．全ピクセルがランダム色

    正解：イ．全ピクセルが透明(RGBA全て0)

    解説：createImageDataは全ピクセルが透明な黒(RGBAすべて0)で初期化される。

75. 問75．ctx.strokeRect(10, 10, 100, 50) を実行したときの描画結果として正しいのはどれか。

    • ア．幅100・高さ50の矩形を塗りつぶす
    • イ．矩形領域を消去する
    • ウ．幅100・高さ50の矩形の輪郭線を描く
    • エ．幅50・高さ100の矩形の輪郭線を描く

    正解：ウ．幅100・高さ50の矩形の輪郭線を描く

    解説：strokeRectは指定矩形の輪郭線のみを描く。塗りつぶしはfillRectが行う。