canvasで画像の一部だけ描画する方法。

こんにちは、おじさんです。

今回はCanvasで画像の一部だけを描画する方法を説明していきます。

そうすることで一つの画像でアニメーションが作れちゃうっ！

まずindex.htmlのbodyにCanvas要素を追加します。

~~~~~略~~~~~
<body>
    <canvas id="canvas" width="300" height="300"></canvas>
</body>
~~~~~~~~~~~

idとか正味どうでもいいです。（え？）なんでもおｋ

後で使うから覚えやすいので。

widthとheightは幅と高さです。

お好きにデブにしてもがりにしてもおｋです。

そしたらcanvasのしたにscriptタグを入れましょう。

~~~~~略~~~~~
<body>
    <canvas id="canvas" width="300" height="300"></canvas>
    <script src="js/main.js"></script>
</body>
~~~~~~~~~~~

自分はhtmlファイルとjsファイルを別々にしてますが同じでもおｋです。

そしたらjsファイルを開いてもろてcanvas要素を取得してcontextを取得します。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

壱行目のかっこの中はさっきcanvasにつけたidを書きましょう。

最後にcanvasに描画したい画像をへんすうにわたしょ（言葉が思いつかんかった）

var img = new Image();
img.src = "画像のパス";

これで初期化はfinish!!!!

続いては画像を切り抜いていきます。

まず画像を描画するための関数についてです。

画像を描画するにはdrawImage関数を使います。

drawImageは万能君で

引数を変えることで描画の仕方を変えれます。

うーん、万能。

今回は画像の一部を表示したいので

drawImage(画像ファイル, 画像の切り取り開始x, 画像の切り取り開始y, 切り取る幅, 切り取る高さ, 描画x, 描画y, 幅, 高さ);

と書きましょう。

f:id:akkodayo:20220326002120p:plain

「コ↑コ↓だけ切り取りたい」って方は

drawImage(0, 0, 100, 100, 100, 80, 50, 50);

みたいにやれば行くぞぉ

最後に実際に描画していきます。

まずさっき取得したコンテキストからdrawImageを呼び出します。

第一引数はさっき取得した画像を取り込んだ変数を指定してください。

ctx.drawImage(img, 0, 0, 100, 100, 100, 80, 50, 50);

それでぶらうざをひらいてみれば

あらなんてふしぎ、きりぬかれているじゃあありやせんか！

最後にまとめです。

ありがとうございました。

おじさんの毎日