基本コード
以下のコードをそのまま、コピーすれば動作します。また、ソースコード内の図形を変えたりカスタマイズをすれば楽しい自分好みの動くページを簡単に描画できると思います。
<html>
<head>
<title>飛行機</title>
</head>
<body>
<script type="text/javascript">
var speedX = 4.0; // X軸移動距離
var speedY = 1.0; // Y軸移動距離
var locX = 50; // 開始座標
var locY = 20; // 開始座標
var ctx;
function init(){
var canvas = document.getElementById("airplane");
if (canvas.getContext){
ctx = canvas.getContext("2d");
var timerID=setInterval(draw,100);
}
}
function draw(){
// 画面をクリア
ctx.globalCompositeOperation = "destination-out";
ctx.beginPath();
ctx.fillRect(0, 0, 350,100);
//図形の色設定
if(speedY < 0){
ctx.fillStyle = "rgb(10,10,100)"; // 下昇
}
else{
ctx.fillStyle = "rgb(10,100,10)"; // 水平
}
// 図形原点X,Y座標決定
locX += speedX;
locY += speedY;
// X,Yの増減の移動量決定
if(locX < 52 || locX > 300){
speedX *= -1;
}
if(locY < 10 || locY > 49){
speedY *= -1;
}
// 図形反転情報決定
if(speedX < 0){
LR = -1; // 左向き
}
else {
LR = 1; // 右向き
}
// 図形の左右反転/縮小/原点移動
ctx.setTransform(LR*0.5, 0, 0,0.5, locX, locY)
// 図形を回転
if(speedY < 0){
ctx.rotate(Math.PI /(-32)); // 上昇
}
else{
ctx.rotate(0); // 水平
}
// 図形の合成
ctx.globalCompositeOperation = "destination-over";
// 胴体部分
ctx.beginPath();
ctx.moveTo(10,45);
ctx.lineTo(90,42);
ctx.quadraticCurveTo(110, 50, 90, 58)
ctx.lineTo(10,55);
ctx.closePath();
ctx.fill();
// 主翼部分
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(40,5);
ctx.lineTo(50,5);
ctx.lineTo(75,50);
ctx.lineTo(50,95);
ctx.lineTo(40,95);
ctx.closePath();
ctx.fill();
// 尾翼部分
ctx.beginPath();
ctx.moveTo(10,50);
ctx.lineTo(8,35);
ctx.lineTo(15,35);
ctx.lineTo(30,50);
ctx.lineTo(15,65);
ctx.lineTo(8,65);
ctx.closePath();
ctx.fill();
}
window.onload = init; // 自動で処理を開始
</script>
<div style="width:350px; margin:0 auto;">
<canvas id="airplane" width="350" height="100"></canvas>
</div>
</body>
</html>
動作時間設定
上記の例で無限に繰り返して描画を続けますが、描画回数を制限したい場合は赤字の部分コードを追加。
<script type="text/javascript">
var speedX = 4.0; // X軸移動距離
var speedY = 1.0; // Y軸移動距離
var locX = 50; // 開始座標
var locY = 20; // 開始座標
var ctx;
var i = 0 ;
function draw(){
// 画面をクリア
ctx.globalCompositeOperation = "destination-out";
ctx.beginPath();
ctx.fillRect(0, 0, 350,100);
// 時間制限
i++;
if (i > 15){
clearInterval(timerID);
}
手動で動作開始
閲覧者のクリックで動作するようにするには赤字の部分コードを追加。
ctx.closePath();
ctx.fill();
}
// window.onload = init; // 自動で処理を開始
</script>
<form name="test">
<input type="button" value="動作開始" onClick="init()">
</form><br>
<div style="width:350px; margin:0 auto;">
<canvas id="airplane" width="350" height="100"></canvas>
</div>
コードを圧縮化(暗号化)
かなり長いソースコードになってなってしまいました。このままHTMLに挿入していもいいのですが、コードを変更しないなら圧縮してHTMLに埋め込んだほうがスマートだと思います。
<script type="text/javascript">
function init(){var t=document.getElementById("airplane");if(t.getContext){ctx=t.getContext("2d");setInterval(draw,100)}}function draw(){ctx.globalCompositeOperation="destination-out",ctx.beginPath(),ctx.fillRect(0,0,350,100),0>speedY?ctx.fillStyle="rgb(10,10,100)":ctx.fillStyle="rgb(10,100,10)",locX+=speedX,locY+=speedY,(52>locX||locX>300)&&(speedX*=-1),(10>locY||locY>49)&&(speedY*=-1),0>speedX?LR=-1:LR=1,ctx.setTransform(.5*LR,0,0,.5,locX,locY),0>speedY?ctx.rotate(Math.PI/-32):ctx.rotate(0),ctx.globalCompositeOperation="destination-over",ctx.beginPath(),ctx.moveTo(10,45),ctx.lineTo(90,42),ctx.quadraticCurveTo(110,50,90,58),ctx.lineTo(10,55),ctx.closePath(),ctx.fill(),ctx.beginPath(),ctx.moveTo(50,50),ctx.lineTo(40,5),ctx.lineTo(50,5),ctx.lineTo(75,50),ctx.lineTo(50,95),ctx.lineTo(40,95),ctx.closePath(),ctx.fill(),ctx.beginPath(),ctx.moveTo(10,50),ctx.lineTo(8,35),ctx.lineTo(15,35),ctx.lineTo(30,50),ctx.lineTo(15,65),ctx.lineTo(8,65),ctx.closePath(),ctx.fill()}var speedX=4,speedY=1,locX=50,locY=20,ctx,i=0;window.onload=init;
</script>
ここまでの基本雛形を使えば、図形を使った簡単な動くJavaScriptは誰でも作れると思います。
Chromeなどで動作確認はしていますが、なんせ素人の初心者が書いているコードなので動作が完全ではなくても悪しからず！
