More than 5 years have passed since last update.

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

Last updated at 2018-11-17Posted at 2018-11-17

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

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

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

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

<!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>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up