Canvasを使う上で基礎になってくること3選。
この記事では、将来プログラミングをできるようになるために、プログラムについて学んだ知識を解説していく記事です。
今日学んだプログラミングの知識。
Canvasとは。
Canvas の使い方。
Canvas タグとは。
Canvasとは。
Canvas API（きゃんばす えーぴーあい）は、 HTML の <canvas> タグと JavaScript によってグラフィックを描くことができます。
他にも、アニメーション、ゲームのグラフィック、データの可視化、写真加工、リアルタイム動画処理などに使用できます。
Canvas の使い方。
まずは必要な HTML ファイルと JavaScript ファイルを作成します。
準備
HTML ファイルと JavaScript ファイルを用意します。
dino.html
dinoGame.js
の2 つのファイルを用意しましょう。
それぞれ下記のようになります。
dino.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="dinoGame.js"></script>
</body>
</html>
dinoGame.js
console.log('こんにちは');
ファイルの用意ができたらブラウザに表示させ、 コンソールに こんにちは と表示できていたら準備完了です。
Canvas タグとは。
Canvas を使用するには <canvas></canvas> タグが必要になります。
先ほど作成した dino.html の body タグに、下記のように追加してみます。
<body>
+
<canvas width="800px" height="450px" id="canvas"></canvas>
<script src="dinoGame.js"></script>
</body>
dino.htmlPlease Type!
属性はそれぞれ
width: 横幅
height: 縦幅
id: ID属性(後ほど JavaScript で使用するために設定)
です。
まだこの状態では画面に何も表示されないため、JavaScript を記述していきましょう。
まとめ
今回は新しくCanvasについて解説してみました。Canvasは上記の説明でもあった通りアニメーションやゲームのグラフィックなどにしようでき、ゲームを作ることが目標な僕からしたらとても大切になってくるプログラミングです。間違いがないようしっかり丁寧に学習していきたいです。
この記事が気に入ったらサポートをしてみませんか？