HTML5プロフェッショナル認定試験
レベル2ポイント解説無料セミナー
株式会社クリーク・アンド・リバー社 認定講師
高井 歩

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

本日の内容• 試験概要• Canvas (2D)
• 概要
• コンテキスト• 基本図形描画• テキスト描画• SVG• SVGの特徴• Canvasとの違い• 変形• エフェクト• イメージデータ
2

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

HTML5プロフェッショナル認定資格とは•次世代のWebプロフェッショナルのスキルの向上に貢献するために、
HTML5を活用したWebページやWebアプリケーションなどのデザイン、設計、構築に関する体系だった知識とスキルを備えたHTML5のプロフェッ
ショナルを中立的な立場で公平かつ厳正に認定する資格制度です。

•

Webデザイナー、Webプログラマー、スマートフォンアプリ開発者、
サーバーサイドエンジニアなどの、Web開発プロジェクトやWebサービスに関わるあらゆるプロフェッショナルが対象です。

•

多くの企業が推進する次世代Web言語の認定資格として、
HTML5のプロフェッショナルのスキルの向上に役立ちます。
また、企業内や研修機関での『技術力を担保する客観的基準』としても活用できます。

3

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

二つのレベル
対象
Webデザイナー

マルチデバイスに対応したWebコンテンツをHTML5を使ってデザイン・作成できる。

グラフィックフロントエンド

デザイナー

プログラマーHTMLコーダー

Webディレクター

スマートフォン
アプリ開発者

サーバーサイド
エンジニア

Webシステム
開発者

対象
フロントエンド

Webデザイナー

プログラマー

最新のAPIを駆使したWebアプリケーションを設計・開発できる。

HTMLコーダー

Webディレクター

スマートフォン

サーバーサイドエンジニア

アプリ開発者

4

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Webシステム
開発者

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

レベル1とレベル2の資格体系
HTML/HTML5マークアップ
HTML5に関するタグの用途、構造の組み立て方に関する技術
グラフィックス
JavascriptやCSSなどを用いて、動的にグラフィックスを生成したりアニメーションを実現したりする技術
レスポンシブWebデザイン
一つのソースで、スマートフォンなどの様々なデバイスの画面サイズに対応させるための技術
通信・デバイスアクセス系APIJavaScriptからクラウドと通信をして情報の送受信を行った
り、センサーなどのデバイスにアクセスしたりする技術
Javascriptプログラミング
Javascriptを使って、動的なWebコンテンツを作成する技術
マルチメディア
３D・動画・音声ファイルなどのマルチメディアコンテンツの表示・再生に関する技術
ユーザビリティJavaScriptやCSSなどを用いて、デザイン仕様に沿った見やす
い表示や操作しやすいコンテンツを作成するための技術
パフォーマンス
ストレージや並列処理を使ってコンテンツを効率良く高速に動作させたり、オフラインでも動作する仕組みを作るための技術

5

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

レベル1とレベル2の資格体系
ベーシックレベル認定名： HTML5 Level1 (Markup Professional)

HTML5プロフェッショナル向け

試験名： HTML5 Level1 Exam

この資格の認定者は、下記のスキルと知識を持つWebプロフェッショナルであること
所要時間：90分を証明できます。

試験問題数：約60問"HTML5を使ってWebコンテンツを作成することができる。

受験料：￥15,000 （税別）

"ユーザー体験を考慮したWEBコンテンツを設計・作成することができる。

認定条件： HTML5 レベル1試験に合格す"スマートフォンや組み込み機器など、ブラウザが利用可能な様々なデバイスに対応ることしたコンテンツを制作できる。

認定の有意性の期限：5年間"HTML5で何ができるか、どういった技術を使うべきかの広範囲の基礎知識を有する。

アドバンストレベル

認定名： HTML5 Level2 (Application Development Professional)

HTML5プロフェッショナル向け

試験名： HTML5 Level2 Exam
この資格の認定者は、下記のスキルと知識を持つWebプロフェッショナルであることを証明

所要時間：90分
試験問題数：40〜45問
受験料：￥15,000(税別)
認定条件：HTML5 レベル2試験に合格できます。
"動的に動作させて高いユーザビリティを実現するリッチユーザインターフェイスアプリケーショ
ンを作成することができる。
"マルチデバイスに対応し高パフォーマンスで動作する動的コンテンツを作成することができる。
"システム間連携を行いリアルタイムな情報を提供するアプリケーションを作成することがでる。

し、かつ有意なHTML5レベル1認定を保有"スマートフォンなどでネイティブアプリに近い機能を組み込んだ先端のWebアプリケーションにしていること。

近い機能を組み込んだ先端のWebアプリケーションを開発することができる。

認定の有意性の期限：5年間"APIのセキュリティモデルを理解したうえで開発することができる。

6

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

レベル2の出題構成(1)
主題

重要度

項目

JavaScript

JavaScript文法

10

WebブラウザにおけるJavaScript API

イベント

8

ドキュメントオブジェクト/DOM
ウィンドウオブジェクト

6
8

Selectors API

7

History API
テスト・デバッグ

7

Canvas(2D)

8

SVG

2

マルチメディア

Timing control for script-based animation
メディア要素のAPI

2
5

ストレージ

Web Storage

7

Indexed Database API

5

File API

5

バイナリーデータ

4

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

7

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

6Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

レベル2の出題構成(2)主題

通信デバイスアクセス
パフォーマンスとオフライン

セキュリティモデル

8

項目

重要度

Web Socket

5

XMLHttpRequest

5

Server-Sent Event1

Geolocation API
Device Orientation
Web Workers
High Resolution Time
オフラインアプリケーションAPI
Page Visibility
Navigation Timing
クロスオリジン制約とCORS
セキュリティモデルとSSLの関係

5
1
5
2
3
2
1
4
4

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

学習方法
•

参考書

•

サンプル問題•出題範囲を確認••9

説明できない用語が無いようにする。

自分でサンプルを作って確かめる。
•

処理の順番などを確認する。(初期化->処理->後片付け)•

Webブラウザ毎に動作が異なることがあるので注意。

•

Webサーバの有無で動作が異なることがあるので注意。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

2.3.1Canvas(2D)
知識問題 コードリーティング問題

10

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

Canvas(2D)の概要

11•

Canvasは元々はAppleの独自実装だった機能を
HTML5に取りこんだ•

それまではWebブラウザ上で画像を作成、修正す
るにはFlashなどが必要だった•

CanvasをJavaScriptから操作することで、柔軟な画像処理が出来るようになった

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

Canvasの特徴と提供機能
Canvas(2D)では、•直線、矩形、円弧、パスなどの図形の描画•

テキスト描画

•

変形

•

エフェクト

•

画像表示

•

ビットマップデータへの直接アクセスなどの機能を提供している
12

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

Canvasが利用可能な条件

13•

Internet Explorer 9以降、その他主なWebブラウ
ザでは対応済み•

Internet Explorer 6〜8はJavaScriptのライブラ
リを読み込むことでエミュレートできる•

ページにcanvas要素が存在する<canvas id="cv" width="300" height="300" />The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

コンテキスト

14•

Canvas要素をJavaScriptから操作して直接描画を行なうのではなく、描画専用のオブジェクトである
コンテキストを使用して描画する•

コンテキストは線の色や塗り潰しの色、フォントなど描画に必要な様々な情報を保持している•

コンテキストは2D,3Dの用途に合せて使い分ける

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

2Dコンテキストの概要•

Canvas要素から描画に必要なコンテキスト(CanvasRenderingContext2Dオブジェクト)を取得するには、getContext()メソッドを使用する•

canvas.getContext("2d")•

現状では、"2d"以外に3Dの描画技術であるWebGL
を使用する"webgl"を指定できる(出題範囲外)•"webgl"ではWebGLRenderingContext オブジェ
クトが取得できる(出題範囲外)

15

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

描画状態の遷移
コンテキストには描画状態として、•変形につかう変換行列•

クリッピングパス•

線の色,線の幅,線の端の形,線の接続点の形•

ドロップシャドウの設定•

塗り潰しの色,透明度

•

合成方法

•

フォント,文字寄せ,ベースラインのような情報が保存されている
描画する内容に合わせてこれらの情報を書き換えていく
16

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

描画状態の保存と復元する方法

コ
ン
テ
キ
ス
ト
保
存

•

描画する色や線の太さ、変形などを一時的に変更したい場合などに、現在の状態をcontext.save()メソッド
で保存し、context.restore() メソッドで元に戻せる•

保存した描画状態は後入れ先出しのスタック形式で保存されるため、複数の状態を保持できる
2.
線色:黒

1. save()

4.
線色:赤

3. save()
線色:黒

17

線色:青

線色:赤

線色:赤

5. restore()

線色:黒

線色:黒

6. restore()
線色:黒The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

基本図形描画18•

曲線や直線を繋いでパスを作り描画する機能や、使用頻度の高い矩形や円弧の描画については専用のメソッドを用意している•

パスを使う場合、beginPath()メソッドでパスを開始し、moveTo(),lineTo(),bezierCurveTo()などのメソッドでパスを構成する要素を追加する•

パスが完成したら、オープンパスであればstroke(),クローズパスであればclosePath()のあとstroke()またはﬁll()を呼び出して描画を行なう
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

線•

線をパスに追加するには、moveTo()メソッドで始点に移動し、lineTo()やarcTo(),bezierCurveTo()メソッドで次の点までのパスを追加していく

1

•

•

•

moveTo( x , y )2lineTo( x , y )arcTo( x1 , y1 , x2 , y2 , r )(x2,y2)(x1,y1)19r

3context.beginPath();1) context.moveTo(50,20);2) context.lineTo(20,80);
3) context.lineTo(80,80);
context.closePath();context.stroke();
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

曲線
•

ベジェ曲線
•

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)•

quadraticCurveTo(cpx, cpy, x, y)(cp1x,cp1y)(cp2x,cp2y)(cpx,cpy)

(x,y)
(x,y)
始点 bezierCurveTo(三次ベジェ曲線)
20

始点 quadraticCurveTo(二次ベジェ曲線)
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

円弧•

arc( cx , cy , r , 開始角度 , 終了角度 , 反時計周りか )

•

角度0は右

•

角度指定はラジアン•半径に対する円周の比•90 はπ/2•

180 はπ•360 は2π

Math.PI * 3 / 2
rMath.PI(cx,cy)Math.PI * 2
0Math.PI / 2•

角度は時計周りで数える•

指定された角度まで時計回りに線を引くか、反時計周りに線を引くか21

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

矩形•

パスを使って矩形を描くこともできるが、矩形描画用メソッ
ドを使うと簡単に描画できる•

矩形の輪郭を描画••

矩形の塗り潰し••

ﬁllRect(x , y , width , height)

矩形の消去(透明にする)•22

strokeRect(x , y , width , height)

clearRect(x , y , width , height)
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

Canvasの塗りつぶし•

パスを記述したあと、ﬁll()メソッドを呼び出すこと
でﬁllStyleに従って塗り潰しが描画される
塗り潰しの場合は、
closePathしなくても暗黙的に閉じられる

context.beginPath();context.moveTo(90,0);context.lineTo(35,180);
context.lineTo(180,70);
context.lineTo(0,70);
context.lineTo(150,180);
context.ﬁll();23

時計周りと反時計周りのパスが重な
context.beginPath();
ると塗り潰されな
context.moveTo(10,10);
いことがある

context.lineTo(10,110);context.lineTo(110,110);context.lineTo(110,10);context.moveTo(50,20);
context.lineTo(160,20);
context.lineTo(160,60);
context.lineTo(50,60);
context.ﬁll();

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

クリッピング領域•

クリッピング領域(クリッピングパス)を使うと描画したくない部分をマスクすることが出来る
クリッピングパス

ﬁllRectとクリッピングパスが重なっている部分だけ描画されているcontext.beginPath();context.arc(50, 50, 40, 0, Math.PI*2, false);
context.clip();
context.ﬁllRect(60,40,100,100);24

本来塗り潰される部分がclip()メソッドでクリッピング領域になる
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

問題1
次の描画結果になるスクリプトはどれか

A. context.beginPath();context.arc(50, 50, 40, 0, 135, false);
context.stroke();B. context2.beginPath();context2.arc(50, 50, 40, 0, 135 * Math.PI / 180, false);
context2.stroke();C. context3.beginPath();context3.arc(50, 50, 40, 0, 135 * Math.PI / 180, true);context3.stroke();25

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

テキスト描画

26•

Canvasに対して、指定した色、指定したフォント、文字の大きさでテキストを描画することができる•

輪郭だけの袋文字や、ドロップシャドウなどの効果を付けることもできる•

CSSによるスタイル指定や、リンクの設定はできな
いThe HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

塗りつぶし描画•

通常のテキスト描画をする場合には、
context.ﬁllText()メソッドを使用する•

context.ﬁllText(文字列,x,y)•

x,yは通常はテキストの左下を指すので注意が必要
context.font = "30px 'sans-serif'";context.ﬁllText('HTML5 Professional', 10, 25);

x:10,y:25
27

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

輪郭描画
•

袋文字のような輪郭だけのテキスト描画をする場合には、context.strokeText()メソッドを使用する•

context.strokeText(文字列,x,y)•

x,yは通常はテキストの左下を指すので注意が必要
context.font = "30px 'sans-serif'";context.strokeText('HTML5 Professional', 10, 25);

x:10,y:25
28

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

フォントの設定•

文字サイズ、フォントの設定••

文字色(他の図形描画と共通)•••

ﬁllColor , strokeColorプロパティ

ドロップシャドウ
•shadowColor , shadowBlur プロパティ•

shadowOﬀsetX , shadowOﬀsetY プロパティ

文字の配置
•

29

fontプロパティ

textAlign プロパティ
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

テキスト幅の算定•

テキストの折り返しや、テキストを枠線で囲む場合などに、テキストの幅を必要とする場合がある•

プロポーショナルフォントでは同じ文字数でもフォントや文字の並びによって全体の幅が異なるため、
context.measureText()メソッドで実際のフォントと文字列で幅何ピクセルになるか計算する
context.font = "30px 'sans-serif' ";var text = 'HTML5 Professional';
var metrics = context.measureText(text);
console.log( metrics.width + 'px' );30

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

問題2
以下のスクリプトを実行した結果として正しいものはどれか
context.strokeStyle = '#FF0000';
context.ﬁllText('HTML5',50,50);
図中の点はX=50,Y=50を表わしている

A.

B.
HTML5
D.

C.

HTML5

HTML5

HTML5
31

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

変形

32

•

Canvasに対する描画を拡大・縮小、回転、移動させることができる•

現在のCanvasの内容を変形させるのではなく、変形を設定した後の描画に適用されるので注意が必要•

複数の変形を指定した場合、指定の順番が異なると結果が変化する。指定した逆の順番に適用されると考えやすい

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

拡大・縮小拡大縮小は、描画しようとする内容だけを拡大、縮小するのではなく、Canvas全体に適用される
ﬁllRect(10,10,30,30)
context.scale(1.5);
1.5倍が設定されているCanvasに•○ ﬁllRect(15,15,30,30)
1.5倍
ﬁllRect(10,10,20,20);を実行すると33

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

回転•

回転はCanvas左上を原点に時計周りに回転する•

Rotate()メソッドの単位はラジアンなので、度で指定する場合には 度 * Math.PI / 180 で変換する

context.rotate(45 * Math.PI / 180);が設定されているCanvasに

45

ﬁllRect(10,10,20,20);を実行すると34

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

移動•

移動はcontext.translate()メソッドで指定した量だけ、縦横にずれて描画される•

複雑な変形の場合には原点で拡大縮小や回転をしたあと移動させるとわかりやすいcontext.translate(20,30);が設定されているCanvasに

ﬁllRect(10,10,20,20);を実行すると
35

ﬁllRect(30,40,20,20);と同じ結果にThe HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

変換マトリックス•

scale(),rotate(),translate()メソッドは、実行されると内部の変換マトリックスに影響を与える•

setTransform()メソッドは変換マトリックス(行列)を直接上書きする例)translate(10,20)•

setTransform( a , b , c , d , e , f )変換マトリックス
x' = x*1+y*0+1*10
y' = x*0 + y*1+1*20
1 = x*0 + y*0 + 1*1
36

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

問題3
以下のスクリプトを実行した結果はどれか
context.translate(10,10);context.rotate( Math.PI / 4);context.strokeRect(10,10,30,30);※ 図中の点はX=10,Y=10を表わしている

A.

B.

C.

D.

37

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

エフェクト38•

Canvasでは、単に図形を描画するだけでは無く、画像に対してさまざまな表現を行なうことができる•

Canvas全体の透明度を変化させたり、描画や画像の表示の際にPhotoshopのレイヤーのように合成方法を変えられる•

組込みのエフェクトで不足する場合は、自分でピクセル単位の編集を加えて独自の効果を与えることもできる
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

透明度指定•Canvasへの描画に対して透明度を設定できる•

context.globalAlphaに0.0(透明)〜1.0(不透明)の値を代入することで、以後の描画に透明度が反映される
context1.ﬁllStyle = "red";context1.ﬁllRect(0,0,50,50);
context1.ﬁllStyle = "green";
context1.ﬁllRect(20,20,50,50);
context1.ﬁllStyle = "blue";
context1.globalAlpha = 0.5;
context1.ﬁllRect(40,40,50,50);

39

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

合成方法の指定

40•

現在のCanvasの内容と次の描画内容の合成方法を指定できる•

context.globalCompositeOperationプロパ
ティに文字列で合成方法を指定すると、乗算(multiply)やソフトライト(soft-light)など様々な合成方法を簡単に実現できる•

ただし、Photoshopなどのレイヤーのような仕組みは無いため、描画を行なう前に合成方法を指定する必要があり、描画の後で既に完了した描画の合成方法を変えることはできない
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

問題4context.globalAlphaを0.8にした場合、画像の表示はどのようになるか、正しいものはどれか
A. 設定したCanvas全体がすこし透明になる
B. 設定したCanvas全体がほぼ透明になる
C. contextに次に行なう描画が少し透明になる
D. contextに次に行なう描画がほぼ透明になる
41

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

画像の描画
コンテキストに画像(Imageオブジェクト)を描画するには、
context.drawImageメソッドを使用する。drawImageメソッドの描画結果には、クリッピング領域や合成方法の指定が影響する。
context.drawImage(Imageオブジェクト , x , y )※ x,yは画像左上の表示位置を指定する

画像の描画
42

クリッピング

合成方法の指定The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

イメージデータ標準の機能として実装されていない処理を行ないたい
場合は、ピクセル単位で色の取得や書き込みの必要があり、そのためにImageDataオブジェクトを使用する
ImageDataオブジェクトでは、画像を1ピクセルあたりR,G,B,Aの4バイトのデータを持つ一次元配列として扱う
Canvasの内容を含むImageDataオブジェクトを作る
ことも、全く新規の画像データを作ることもできる
43

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

イメージデータ
ImageDataオブジェクトのdataプロパティの模式図
index

0

1

color

R0 G0 B0 A0 R1 G1 B1 A1 R2 G2 B2 A2 R3 G3 B3 A3 ...

value

0

0

2

0

3

0

4

0

5

0

6

0

7

0

8

FF

9 10 11 12 13 14 15 ...

0

0

0

0

0

0

0 ...

(ピクセルのx座標+y座標*画像の幅) * 4 + c = 配列のインデックス
c=0 R
c=1 G
c=2 B
c=3 A

例) 幅300pxの画像の座標(10,40)のピクセルのBの値(10 + 40 * 300) * 4 + 2 = 12012 バイト目
44

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

画像の生成•context.createImageData()メソッドを使って、新規のImageDataオブジェクトを生成する
context.createImageData( width , height )•Canvasの内容を含むImageDataオブジェクトを取得するには、context.getImageData()メソッドを使用する
context.getImageData(left , top , width , height)•

ImageDataオブジェクトは、context.putImageData()メソッ
ドでCanvasに描画することができる
context.putImageData(imageData , left , top)45

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

問題5
画像に関するオブジェクトの生成メソッドとCanvas
への描画メソッドの組み合わせとして正しいものを2つ選べ。
A. Image / new Image() / drawImage()
B. ImageData / new Image() / drawImageData()
C. Image / createImage() / putImage()
D. ImageData / createImageData() / putImageData()

46

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

2.3.2 SVG
知識問題

47

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

SVGの特徴
Scalable Vector Graphics

48•

ベクター形式の画像であるため、高解像度なデバイスや、ページの拡大表示でも滑らかに表示できる。

•

ＸＭＬによるテキスト記述のベクター形式で、内容によってはビットマップ形式よりもデータ量が少なくなる•

SVG要素を使ってインラインで画像を記述できる•

img要素のsrc属性や、object要素のdata属性にSVG形式のファイルを指定すると表示できる•

CSSのbackground-imageにSVG形式のファイルを指定して表示できる
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

インライン形式のSVGの例<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200" ><circle cx="95" cy="95" r="90" ﬁll-opacity="0" stroke="#1017f1" stroke-width="3"/><rect x="50" y="50" width="20" height="50" ﬁll="#1d24f2"/><rect x="120" y="50" width="20" height="50" ﬁll="#1d24f2"/><path d="M140 130C130 180 60 180 50 130" ﬁll-opacity="0" stroke="#1017f1"
stroke-width="7" /></svg>

rect

circlepath
49

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

Canvasとの違い

50•

Canvasはビットマップ形式、SVGはベクター形式•

Canvasの操作にはJavaScriptが必須、SVGは
JavaScriptによる操作の他、画像として読み込んだ
り、タグを直接記述することもできる•

Canvasの編集は上書きのみ、SVGは要素やその属性を修正することで内容を変更できる•

複雑な画像では画像の計算に時間が掛ることがある
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

問題6
SVGの特徴として正しくない説明はどれか
A. ベクター形式である
B. SVGタグではなくObjectタグを使用する
C. 後から描画要素を編集できる
D. 拡大しても滑らかに表示される

51

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

本日の内容• 試験概要• Canvas (2D)
• 概要
• コンテキスト• 基本図形描画• テキスト描画• SVG• SVGの特徴• Canvasとの違い• 変形• エフェクト• イメージデータ
52

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

問題の解答53•

問題1: C / 角度がラジアンで指定されていて、反時計周りに線を引く
Cが正解。

•

問題2: B / strokeStyleはﬁll系のメソッドには影響を与えない。テキスト描画の座標は左下が基準。

•

問題3: C / 詳細はサンプルファイルを参照。

•

問題4: C / globalAlphaはCanvasへの描画の透明度。設定以降の描画全てに影響する。0.0で完全な透明、1.0で不透明。

•

問題5: A,D / オブジェクトの種類によって使用するメソッドが異なる。

•

問題6: B / Object要素でもSVGは表示できるが、SVG要素を使うこともできる。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.