アニメーションプログラミング入門～その３～
アニメーションプログラミング入門～その３～:
今回は、自作の「ロケット（もどき）」の画像をCANVASで描いてみました。
→ロケット（もどき）描きました！【アニメーションプログラミング～その３～】
画像の表示で手こずってかなり苦戦したのですが、何とか画像を表示することに成功しました。
次は「ロケット（もどき）」を動かしてみたいと思います。
「ロケット（もどき）」を描いてみました。
今回は、自作の「ロケット（もどき）」の画像を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>
コメント
コメントを投稿