html5のCanvasを使ってアニメーションを作る1

プログラミングしたいけど何をやったらいいかわからない

このシリーズは、プログラミングをやってみたいけど何からやったらいいかわからない方向けのブログです。

JavaScript の Canvas に挑戦

ひとまず、自分が今勉強している Canvas についてやっていきます。
Canvas は、画像を描いたり、アニメーションをつくったりできる JavaScript の機能です。

html から書いてみる

まずは html から書いてみます。

<!doctype html>
<html lang="ja">
    <head>
        <title>Canvas 練習</title>
        <meta charset="utf-8">
        
        <style>
            #mycanvas{
                border: 1px solid;
            }
        </style>
        
    </head>
    
    <body>
        <canvas id="mycanvas" width="500" height="300"></canvas>
    </body>
    
    <script>
    </script>
    
</html>

これをブラウザで表示すると、以下のように四角い枠ができます。

c1png

この枠の中に絵とかアニメーションを描いていきます。

Canvas のコンテキストを取得する

では、実際にこの中に描いていくのですが、その前にやることがあります。

<script>
        //canvas のコンテキストを取得
        var canvas = document.getElementById('mycanvas');
        var ctx = canvas.getContext('2d');
</script>

ここでの「コンテキスト取得」というのは、絵を描くためのパレットを取得する、ってイメージでいいと思います。

3 行目で html の id=’mycanvas’ の部分を取得して、
4 行目で、id=’mycanvas’ のコンテキストを取得してます。

文字を描いてみる

では、絵を描くためのパレットを取得できたので、それに描いていきます。

<script>
        //canvas のコンテキストを取得
        var canvas = document.getElementById('mycanvas');
        var ctx = canvas.getContext('2d');
        
        //M という文字を描く
        ctx.fillText('M', 50, 50);
</script>

M という文字がでましたか。

c2

ctx.fillText(‘M’, 50, 50); の、
‘M’ がcanvasに描く文字列、
一つ目の 50 がパレット内の X 座標、
二つ目の 50 がパレット内の Y 座標です。

ではちょっとずらして、もう一つ M を描いてみます。

<script>
        //canvas のコンテキストを取得
        var canvas = document.getElementById('mycanvas');
        var ctx = canvas.getContext('2d');
        
        //M という文字を描く
        ctx.fillText('M', 50, 50);
        ctx.fillText('M', 60, 50);
</script>

右隣りにもう一つ M が描かれたと思います。

c3

X 座標しか変えてないので、Y 軸(縦方向の位置)はかわっていないです。

では、今度は以下のように 3 つ目を作成します。

<script>
        //canvas のコンテキストを取得
        var canvas = document.getElementById('mycanvas');
        var ctx = canvas.getContext('2d');
        
        //M という文字を描く
        ctx.fillText('M', 50, 50);
        ctx.fillText('M', 60, 50);
        ctx.fillText('M', 70, 60);
</script>

斜めに M ができました。

c4

では少し修正して、斜めに移動させるように以下のようにします。

<script>
        var canvas = document.getElementById('mycanvas');
        var ctx = canvas.getContext('2d');
        
        ctx.fillText('M', 50, 50);
        ctx.fillText('M', 60, 60);
        ctx.fillText('M', 70, 70);
        ctx.fillText('M', 80, 80);
        ctx.fillText('M', 90, 90);
        ctx.fillText('M', 100, 100);
        ctx.fillText('M', 110, 110);
        ctx.fillText('M', 120, 120);
        ctx.fillText('M', 130, 130);
        ctx.fillText('M', 140, 140);
    </script>

c5

次回

canvas に M という文字を描けるようになりました。
また、座標を指定することで、M の位置も指定できました。
実は先ほどのコードのように少しずつ位置をずらすことが、アニメーションにつながります。
パラパラ漫画のようなイメージです。
なので、今日やったことを応用すれば、アニメーションはすぐに作れます。

ただ、今のコードだと、M を描く度に X,Y 座標を引数に指定しないといけないので面倒です。

次回はこのコードを徐々に最適化していきます。

今回のコード全体

<!doctype html>
<html lang="ja">
    <head>
        <title>Canvas 練習</title>
        <meta charset="utf-8">
        
        <style>
            #mycanvas{
                border: 1px solid;
            }
        </style>
        
    </head>
    
    <body>
        <canvas id="mycanvas" width="500" height="300"></canvas>
    </body>
    
    <script>
        var canvas = document.getElementById('mycanvas');
        var ctx = canvas.getContext('2d');
        
        ctx.fillText('M', 50, 50);
        ctx.fillText('M', 60, 60);
        ctx.fillText('M', 70, 70);
        ctx.fillText('M', 80, 80);
        ctx.fillText('M', 90, 90);
        ctx.fillText('M', 100, 100);
        ctx.fillText('M', 110, 110);
        ctx.fillText('M', 120, 120);
        ctx.fillText('M', 130, 130);
        ctx.fillText('M', 140, 140);
    </script>
    
</html>

One thought on “html5のCanvasを使ってアニメーションを作る1

  1. Pingback: 何をやったらいいかわからない人へのJavaScript2 | Lachelierブログ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です