Canvasをやる

ちゃんと使い方を覚えようと思った

その昔僕はCanvasという機能をつかっていました。ですが、実際のところ勢いで書いていただけでそんな理解していないかもしれないと思ったのです。ですのでちゃんとやろうと思ったのでこんな記事を作ってしまいました。特に中身のある記事ではありませんが勢いで書いてしまったから投稿します。

こんなのをノリだけで作っていた。

とりあえず大まかな使い方以下の通り。

  // 描画コンテキストの取得
  const canvas = document.getElementById("canvas");
  // 2Dコンテキスト
  const ctx = canvas.getContext("2d");
  // 具体的な描画内容を指定
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0,0,150,75);

描画周りが面倒くさいだけで使い方はシンプルでしたね。

画像だけ読み込みの関係でどうにもならなかったからチュートリアル部分少し修正した。

  const img = new Image();
  img.onload = function(e){
    const c = document.getElementById("canvas");
    const ctx = c.getContext("2d");
    ctx.drawImage(img, 10, 10);  
  }
  img.src = "画像URL";

とりあえず一旦この使い方でやっていけばいいのかなって思う。Canvas単体だとアニメーションつくるのはそんな向いてないのでこれで十分やろとか勝手に思ってる。結局ノリだけで書いてますね……。

参考
HTML Canvas