【HTML】canvasを使いたい・・・！

作ってるアプリでCanvasが必要になりそうなのでこの機会に覚えましょう。

Canvasとは

HTML5で用意されている図形などをお手軽に描けると言われてる要素です。
主に実装はJavaScriptを使用します。

使用準備

まずはHTMLにてCanvasの宣言をします。

<canvas id="canvas" width="600" height="400"></canvas>

サイズは適当。Canvasを取得したいのでIDを何か指定します。
そして、JavaScriptで以下のように記述し、Canvasの使用準備を行います。

const canvas = document.getElementById("canvas");
const context = canvas.getContext('2d');

これで使用準備が完了です。

試しに四角形を描いてみる

やってみよう

context.beginPath();                              // 描画するため、最初に宣言
context.fillStyle = "red"                         // 色は赤を指定
context.fillRect(10, 20, 100, 200);          // 左から10、上から20の幅100高さ200の長方形を描画

こんな感じで表示されると成功です。