やっぱり。JavaScript!- やっぱり画像!
図形、画像などを表示させたい!文字だけじゃ面白くないのでいろんなものを表示させましょう。Canvasという道具(API)を使ってコードを書いて表示せせてみます。
それでは、MDNのチュートリアルを確認しながら順番にやっていきたいと思います。
基本のコードは以下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
// ここに命令を書きます。
</script>
</body>
</html>
HTMLは<body></body> の間、JavaScriptは <script></script>の間に書きます。
とするとページを読み込む時にJavaScriptも読み込みます。
<head></head>の間に <script></script>を記述することもありますが、この時はページを読み込んでも同時に読み込まれないので読み込みの命令を
などを書かないといけません。
今回は
としています。上記コードが全てのコードとなります。
それでは基本的なCanvasの使い方を見ていきます。まずは、HTMLから作っていきます。
<body></body>の中に書きます。ここの部分に実際に表示させるようにコードを書いていきます。
<canvas id="canvas"></canvas>
JavaScriptのコードです。
<script> JavaSccriptのコード </script>
となります。内容としてはHTMLのコードを変数で使えるようにします。
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
これで"ctx "を使って入り入りな命令ができるようになりました。
少し説明すると以下のコードで
図形を表示するエリアを
を取得します。id="canvas"を目印としています。これで準備ができました。
それでは四角2つを書いてみます。ctxに続けて命令を書けば動いてくれます。
というふうに青と黄色の四角が表示されます。まず、表示できました。スクリプトの全体は以下。
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = "blue";
ctx.fillRect (10, 10, 50, 50);
ctx.fillStyle = "yellow";
ctx.fillRect (30, 30, 50, 50);
</script>
この記事が気に入ったらサポートをしてみませんか?