JavaScript
HTML5
CSS3
animation
canvas

アニメーションプログラミング入門~その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>