2
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

アニメーションプログラミング入門~その3~

「ロケット(もどき)」を描いてみました。

今回は、自作の「ロケット(もどき)」の画像をCANVASで描いてみました。

→ロケット(もどき)描きました!【アニメーションプログラミング~その3~】

画像の表示で手こずってかなり苦戦したのですが、何とか画像を表示することに成功しました。

次は「ロケット(もどき)」を動かしてみたいと思います。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="robots" content="noindex,nofollow">
        <title>WEB SCREEN APP</title>
        <style>
            #screen {
                border: solid 1px #000000;
                background-color: #000000;
            }

        </style>
    </head>
    <body>
        <canvas id="screen" width="860" height="485"></canvas>
        <script>
            //canvas要素のDOM(Document Object Model)を取得
            var canvas = document.getElementById('screen');
            var context;
            var selfBody;

            //コンテキストの取得可否チェック
            if(canvas.getContext){

                context = canvas.getContext('2d');

                window.onload = function() {
                    selfBody = new Image();

                    selfBody.src = "rocket.png";

                    selfBody.onload = function(){
                        draw(context);
                    }
                }
            }

            function draw(){
                context.drawImage(selfBody, 0, 200);
            }
        </script>
        <div id="link"></div>
    </body>
</html>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?