Web API Canvas 基本

Canvas APIの基本

上の画像は、
Canvas APIを使用しています。
canvas要素とCanvasAPIは、
Appleが2004年頃に発明したものです。
このCanvas APIのお陰で、
Canvas API でグラフィックス出来るようになりました。

JavaScriptでも面白いゲームが作れるようになります。

ゲームの他には、
アニメーション、データの可視化、写真加工、リアルタイム動画処理に使用されます。
基本的な使い方は
Canvas チュートリアル
から参照できます。

代表的なゲームライブラリには、
EaselJS
Phaser
があります。
ゲームの他にも、様々な用途のライブラリがあります。

上の画像のコードは次の様になります。
getContextメソッドは、要素のコンテキストを取得します。
fillStyle プロパティは配色を設定します。
fillRect() メソッドは四角形を作成しますが、
引数の始めの2個は左上の位置、
次は四角形の幅、
次は四角形の高さです。
strokeRect() メソッドは、
四角形の線画ですが、
fillRect() メソッドと同じく、
引数の始めの2個は左上の位置、
次は四角形の幅、
次は四角形の高さです。


<canvas class="Canv">
    
</canvas>

<script>
  const canvas = document.querySelector('.Canv');
  const width = canvas.width = window.innerWidth;
  const height = canvas.height = window.innerHeight; 

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

  ctx.fillStyle = 'rgb(255,255,255)';
  ctx.fillRect(0, 0, width, height);
 
  ctx.fillStyle = 'rgb(255, 100, 100)';
  ctx.fillRect(50, 50, 50, 150);

  ctx.fillStyle = 'rgb(50, 255, 50)';
  ctx.fillRect(75, 75, 100, 100);

  ctx.fillStyle = 'rgba(255, 50, 255, 0.5)';
  ctx.fillRect(25, 100, 200, 50); 

  ctx.strokeStyle = 'rgb(0, 0, 0)';
  ctx.strokeRect(25, 25, 200, 200);
  ctx.lineWidth = 5;
</script>   

下はスタイルのコードになります。


body {
  margin: 0;
  overflow: hidden;
}  


以上です。