Javascriptで画面を作るに当たって、canvasという物をを使用して作ることができます。
##Canvasって何？
https://developer.mozilla.org/ja/docs/Web/API/Canvas_API
Canvas API は JavaScript と HTML の 要素によってグラフィックを描く方法を提供します。他にも、アニメーション、ゲームのグラフィック、データの可視化、写真加工、リアルタイム動画処理などに使用することができます。
Canvas API は全体的に 2D グラフィックを対象としています。 WebGL API は、こちらも 要素を使用して、ハードウェアで高速化された 2D および 3D グラフィックを描きます。
HTML
- id属性をつける、値は任意で
<canvas id="canvas"></canvas>
JavaScript
- id属性の値を指定して、canvas要素を取得
- getContextというメソッドを使って、CanvasRenderingContext2Dというオブジェクトを取得する
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
こんな感じでコードを書く
CanvasRenderingContext2Dとは？
レンダリングコンテキストは何か？これは「Canvas要素に対して文字や図形を描画するための機能」。
図形・文字・写真・その他の全ての**二次元空間で表現できる「絵」**は色のついた「点」の集合。
線も、円も「点(ピクセル)」の集合。
なので、CanvasRenderingContext2Dはその点(ピクセル)をCanvas上の自由な場所に描くことができる機能を提供してくれるということ。
自由な場所に点を打てるということは
どんな絵でもCanvas上に表現できるということです！
- 塗りつぶす
fillRect - 円を描く
arc - パス(経路)を指定して線を引く
stroke
などの便利なメソッドが豊富にあり、それらのメソッドを呼び出すことで複雑な図形を描画することが可能。
これらを利用し、htmlデータで画面を作成する為に、このようにコードを書き始めます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<canvas
id="canvas"
style="background-color: aqua"
width="500"
height="500"
></canvas>
すると、
このように表示されます。
#まとめ
このようにcanvasを使うことで画面を描くことができます。