見出し画像

やっぱり。JavaScript！- やっぱり画像！

donguri

図形、画像などを表示させたい！文字だけじゃ面白くないのでいろんなものを表示させましょう。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>の間に書きます。

<body><script>　JavaSccriptのコード　</script></body>

とするとページを読み込む時にJavaScriptも読み込みます。

<head></head>の間に <script></script>を記述することもありますが、この時はページを読み込んでも同時に読み込まれないので読み込みの命令を

<body onload="draw();">

などを書かないといけません。

今回は

<body><script>　JavaSccriptのコード　</script></body>

としています。上記コードが全てのコードとなります。

それでは基本的なCanvasの使い方を見ていきます。まずは、HTMLから作っていきます。

<body></body>の中に書きます。ここの部分に実際に表示させるようにコードを書いていきます。

<canvas id="canvas"></canvas>

JavaScriptのコードです。
<script>　JavaSccriptのコード　</script>
となります。内容としてはHTMLのコードを変数で使えるようにします。

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

これで"ctx "を使って入り入りな命令ができるようになりました。

少し説明すると以下のコードで

document.getElementById('canvas');

図形を表示するエリアを

<canvas id="canvas"></canvas>

を取得します。id="canvas"を目印としています。これで準備ができました。

それでは四角2つを書いてみます。ctxに続けて命令を書けば動いてくれます。

ctx.fillStyle = "blue";　　　　　・・・スタイルを決めます。
ctx.fillRect (10, 10, 50, 50);　     ・・・ 四角の座標と長さを指定します。

ctx.fillStyle = "yellow";
ctx.fillRect (30, 30, 50, 50);

というふうに青と黄色の四角が表示されます。まず、表示できました。スクリプトの全体は以下。

  <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>

この記事が気に入ったらサポートをしてみませんか？