【学習ログ】MDN JavaScript チュートリアル (14 回目)

はじめに

学習したもの

MDN JavaScript コーナー
┃
┗ チュートリアル
　 ┣ 完全な初心者向け
　 ┃
　 ┣ 中級者向け
　 ┃ ┣ クライアントサイド Web API
　 ┃ ┃ ┣ Web API の紹介
　 ┃ ┃ ┣ 文章の操作
　 ┃ ┃ ┣ サーバからのデータ取得
　 ┃ ┃ ┣ サードパーティ API
　 ┃ ┃ ┣ 絵を描く（本日の学習箇所）
　 ┃ ┃ ┣ 動画と音声の API
　 ┃ ┃ ┗ クライアント側でのデータ保存
　 ┃ ┃
　 ┃ ┣ JavaScript 「再」入門
　 ┃ ┣ JavaScript のデータ構造
　 ┃ ┣ 等価比較と同一性
　 ┃ ┗ クロージャ
　 ┃
　 ┗ 上級者向け

概要

チュートリアルで習った事の概要は下記の通りです。

絵を描く

JavaScript を使用して <canvas> 要素に描画するための基本を学ぶ。

ノート・メモ

<canvas> では、2D,3D の画像や図形を描画出来る。今回学習するのは、主に 2D。
図形等を描画するときは、キャンバス領域をまず定義する。

<!--
canvas 内のパラグラフはユーザーのブラウザがキャンバスをサポートしていない
場合に表示されるフォールバックコンテンツ
-->
<canvas class="myCanvas">
  <p>ブラウザがキャンバスをサポートしていません。</p>
</canvas>

// 変数にキャンバスの参照、キャンバスの幅・高さを変数に格納する。
// 変数 ctx は、コンテキストと呼ばれる描画領域への特別な参照を取得します。
var canvas = document.querySelector(".myCanvas");
var width = (canvas.width = window.innerWidth);
var height = (canvas.height = window.innerHeight);
var ctx = canvas.getContext("2d");

すべての描画操作は CanvasRenderingContext2D オブジェクト（上記の場合は ctx）を操作することによって行われます。
何かを正確に描画する場所を正確に特定するために座標を指定する必要があります。キャンバスの左上はポイント（0、0）、水平（x）軸は左から右、垂直（y）軸は上から下へ。
キャンバスでは、長方形・枠線のみの長方形・三角形・円・テキスト・外部画像・アニメーションなどを描画できます。
図形や画像はループ処理を使うことで、いろいろな処理を繰り返し、さまざまな表現が可能です。
3D を canvas で表現する際は、 WebGL API を利用します。WebGL は OpenGL グラフィックスプログラミング言語に基づいており、コンピューターの GPU と直接通信できます。そのため、生の WebGL を記述することは、通常の JavaScript よりも C++ などの低レベル言語に近くなります。非常に複雑ですが、非常に強力です。
ほとんどの人は、 3D グラフィックスコードを JavaScript ライブラリを使用して記述します。

分かった事

canvas と JavaScript を組み合わせて、2D や 3D を画面に描画出来る事が分かりました。

分からなかった事

Web サイト制作の場合に、どういったシーンでチュートリアルのようなコードを利用するのか具体的な例が思い浮かばなかったです。

まとめ

チュートリアル自体の内容が長文かつ英文だったので、苦戦しました。

今日(10/12(土))は、台風が接近してきてるのでブログ内容も短めにして、早めに休みたいと思います。

最後までご覧頂きありがとうございました。

フロントエンド学習記(仮題)

主にフロントエンドについて学習した事を記録・メモしていきます。