使用html5的Canvas功能绘制飞机图像，先来看效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>飞机</title>
<style type=”text/css”>
canvas{background:#000;}
</style>
</head>
<body>
<canvas id=”test” width=500 height=500 style=”border: 1px solid #333;”></canvas>
</body>
<script type=”text/javascript”>
var can=document.getElementById(‘test’);
var draw=can.getContext(’2d’);
draw.translate(can.width/2,can.height/2)
function plan(ran_size,ran_x,y){
draw.beginPath();
draw.moveTo(0,0);
draw.lineWidth=0;
draw.lineTo(0,1);
draw.setTransform(ran_size,0,0,ran_size,ran_x,y);
draw.stroke();
draw.closePath();
/*绘画飞机机体*/
var linear1=draw.createLinearGradient(-20,0,20,0);
linear1.addColorStop(0,’rgba(220,220,220,0.8)’);
linear1.addColorStop(0.5,’rgba(255,255,255,0.5)’);
linear1.addColorStop(1,’rgba(220,220,220,0.8)’);
draw.beginPath();
draw.moveTo(20,-120);
draw.lineWidth=1;
draw.strokeStyle=’#000′;
draw.lineTo(20,120);
draw.lineTo(-20,120);
draw.lineTo(-20,-120);
draw.quadraticCurveTo(0,-200,20,-120);
draw.fillStyle=linear1;
draw.setTransform(ran_size,0,0,ran_size,ran_x,y);
draw.fill();
draw.closePath();
/*机体顶部的月牙标志*/
draw.beginPath();
draw.moveTo(20,-120);
draw.lineWidth=1;
draw.fillStyle=’#999′;
draw.quadraticCurveTo(0,-160,-20,-120);
draw.lineTo(-20,-115);
draw.quadraticCurveTo(0,-145,20,-115);
draw.lineTo(20,-120);
draw.setTransform(ran_size,0,0,ran_size,ran_x,y);
draw.fill();
draw.closePath();
/*机身后部*/
var linear2=draw.createLinearGradient(-20,0,20,0);
linear2.addColorStop(0,’rgba(241,241,241,1)’);
linear2.addColorStop(0.5,’rgba(201,201,201,1)’);
linear2.addColorStop(1,’rgba(241,241,241,1)’);
draw.beginPath();
draw.moveTo(-20,-50);
draw.lineWidth=1;
draw.fillStyle=linear2;
draw.quadraticCurveTo(0,280,20,-50);
draw.lineTo(20,120);
draw.bezierCurveTo(20,130,11,160,8,160);
draw.bezierCurveTo(3,170,12,180,1,200);
draw.lineTo(-1,200);
draw.bezierCurveTo(-12,180,-2,170,-8,160);
draw.bezierCurveTo(-11,160,-20,130,-20,120);
draw.lineTo(-20,-50);
draw.setTransform(ran_size,0,0,ran_size,ran_x,y)
draw.fill();
draw.stroke();
draw.closePath();
/*左侧机翼*/
draw.beginPath();
draw.lineWidth=1;
draw.strokeStyle=’#ccc’;
draw.fillStyle=’#eee’;
draw.moveTo(-20,-60);
draw.lineTo(-26,-45);
draw.lineTo(-230,20);
draw.lineTo(-235,70);
draw.lineTo(-230,70);
draw.lineTo(-225,60);
draw.lineTo(-70,25);
draw.lineTo(-20,25)
draw.setTransform(ran_size,0,0,ran_size,ran_x,y)
draw.stroke();
draw.fill();
draw.closePath();
/*右侧机翼*/
draw.beginPath();
draw.lineWidth=1;
draw.strokeStyle=’#ccc’;
draw.moveTo(20,-60);
draw.lineTo(26,-45);
draw.lineTo(230,20);
draw.lineTo(235,70);
draw.lineTo(230,70);
draw.lineTo(225,60);
draw.lineTo(70,25);
draw.lineTo(20,25)
draw.setTransform(ran_size,0,0,ran_size,ran_x,y)
draw.stroke();
draw.fill();
draw.closePath();
/*左侧尾翼*/
draw.beginPath();
draw.lineWidth=1;
draw.strokeStyle=’#ccc’;
draw.fillStyle=’#ddd’
draw.moveTo(-15,145);
draw.lineTo(-100,180);
draw.lineTo(-100,200);
draw.lineTo(-6,186);
draw.lineTo(0,186);
draw.lineTo(0,180);
draw.setTransform(ran_size,0,0,ran_size,ran_x,y)
draw.stroke();
draw.fill();
draw.closePath();
/*左侧尾翼装饰*/
draw.beginPath();
draw.lineWidth=1;
draw.strokeStyle=’#ccc’;
draw.fillStyle=’#eee’
draw.moveTo(-100,190);
draw.lineTo(-6,170);
draw.lineTo(-6,186);
draw.lineTo(-100,200);
draw.setTransform(ran_size,0,0,ran_size,ran_x,y)
draw.stroke();
draw.fill();
draw.closePath();
/*右侧尾翼*/
draw.beginPath();
draw.lineWidth=1;
draw.strokeStyle=’#ccc’;
draw.fillStyle=’#ddd’
draw.moveTo(15,145);
draw.lineTo(100,180);
draw.lineTo(100,200);
draw.lineTo(6,186);
draw.lineTo(0,186);
draw.lineTo(0,180);
draw.setTransform(ran_size,0,0,ran_size,ran_x,y)
draw.stroke();
draw.fill();
draw.closePath();
/*右侧尾翼装饰*/
draw.beginPath();
draw.lineWidth=1;
draw.strokeStyle=’#ccc’;
draw.fillStyle=’#eee’
draw.moveTo(100,190);
draw.lineTo(6,170);
draw.lineTo(6,186);
draw.lineTo(100,200);
draw.setTransform(ran_size,0,0,ran_size,ran_x,y)
draw.stroke();
draw.fill();
draw.closePath();
/*尾部向上的尾翼*/
var linear3=draw.createLinearGradient(0,115,0,190);
linear3.addColorStop(0,’rgba(221,221,221,1)’);
linear3.addColorStop(0.2,’rgba(167,167,167,1)’);
linear3.addColorStop(0.7,’rgba(167,167,167,1)’);
linear3.addColorStop(1,’rgba(221,221,221,0.8)’);
draw.beginPath();
draw.lineWidth=1;
draw.strokeStyle=’#999′;
draw.fillStyle=linear3;
draw.moveTo(0,115);
draw.lineTo(2,130);
draw.lineTo(3,132);
draw.lineTo(3,170);
draw.lineTo(2,172);
draw.lineTo(1,190);
draw.lineTo(-1,190);
draw.lineTo(-2,172);
draw.lineTo(-3,170);
draw.lineTo(-3,132);
draw.lineTo(-2,130);
draw.lineTo(0,115);
draw.setTransform(ran_size,0,0,ran_size,ran_x,y)
draw.stroke();
draw.fill();
draw.closePath();
/*机翼上的喷气装置左1*/
draw.beginPath();
draw.lineWidth=1;
draw.strokeStyle=’#ccc’;
draw.fillStyle=’#ddd’;
draw.arc(-95,10,5,0,Math.PI,true);
draw.lineTo(-90,10)
draw.lineTo(-100,10);
draw.lineTo(-102,12);
draw.lineTo(-102,50);
draw.lineTo(-100,52);
draw.lineTo(-100,55);
draw.quadraticCurveTo(-95,52,-90,55);
draw.lineTo(-90,52);
draw.lineTo(-88,50);
draw.lineTo(-88,12);
draw.lineTo(-90,10);
draw.setTransform(ran_size,0,0,ran_size,ran_x,y)
draw.fill();
draw.stroke();
draw.closePath();
/*机翼上的喷气装置左2*/
draw.beginPath();
draw.lineWidth=1;
draw.strokeStyle=’#ccc’;
draw.arc(-125,15,5,0,Math.PI,true);
draw.lineTo(-120,15)
draw.lineTo(-130,15);
draw.lineTo(-132,17);
draw.lineTo(-132,55);
draw.lineTo(-130,57);
draw.lineTo(-130,60);
draw.quadraticCurveTo(-125,57,-120,60);
draw.lineTo(-120,57);
draw.lineTo(-118,55);
draw.lineTo(-118,17);
draw.lineTo(-120,15);
draw.setTransform(ran_size,0,0,ran_size,ran_x,y)
draw.fill();
draw.stroke();
draw.closePath();
/*机翼上的喷气装置右1*/
draw.beginPath();
draw.lineWidth=1;
draw.strokeStyle=’#ccc’;
draw.arc(95,10,5,0,Math.PI,true);
draw.lineTo(100,10);
draw.lineTo(102,12);
draw.lineTo(102,50);
draw.lineTo(100,52);
draw.lineTo(100,55);
draw.quadraticCurveTo(95,52,90,55);
draw.lineTo(90,52);
draw.lineTo(88,50);
draw.lineTo(88,12);
draw.lineTo(90,10);
draw.setTransform(ran_size,0,0,ran_size,ran_x,y)
draw.fill();
draw.stroke();
draw.closePath();
/*机翼上的喷气装置右2*/
draw.beginPath();
draw.lineWidth=1;
draw.strokeStyle=’#ccc’;
draw.arc(125,15,5,0,Math.PI,true);
draw.lineTo(120,15)
draw.lineTo(130,15);
draw.lineTo(132,17);
draw.lineTo(132,55);
draw.lineTo(130,57);
draw.lineTo(130,60);
draw.quadraticCurveTo(125,57,120,60);
draw.lineTo(120,57);
draw.lineTo(118,55);
draw.lineTo(118,17);
draw.lineTo(120,15);
draw.setTransform(ran_size,0,0,ran_size,ran_x,y)
draw.fill();
draw.stroke();
draw.closePath();
/*机翼上的子弹发射装置左1*/
draw.beginPath();
draw.lineWidth=1;
draw.strokeStyle=’#ccc’;
draw.fillStyle=’#eee’;
draw.moveTo(-78,-28);
draw.lineTo(-78,-44);
draw.lineTo(-82,-44);
draw.lineTo(-82,-27);
draw.setTransform(ran_size,0,0,ran_size,ran_x,y)
draw.stroke();
draw.fill();
draw.closePath();
/*机翼上的子弹发射装置左2*/
draw.beginPath();
draw.lineWidth=1;
draw.strokeStyle=’#ccc’;
draw.moveTo(-48,-37);
draw.lineTo(-48,-53);
draw.lineTo(-52,-53);
draw.lineTo(-52,-36);
draw.setTransform(ran_size,0,0,ran_size,ran_x,y)
draw.stroke();
draw.fill();
draw.closePath();
/*机翼上的子弹发射装置右1*/
draw.beginPath();
draw.lineWidth=1;
draw.strokeStyle=’#ccc’;
draw.moveTo(78,-28);
draw.lineTo(78,-44);
draw.lineTo(82,-44);
draw.lineTo(82,-27);
draw.setTransform(ran_size,0,0,ran_size,ran_x,y)
draw.stroke();
draw.fill();
draw.closePath();
/*机翼上的子弹发射装置右2*/
draw.beginPath();
draw.lineWidth=1;
draw.strokeStyle=’#ccc’;
draw.moveTo(48,-37);
draw.lineTo(48,-53);
draw.lineTo(52,-53);
draw.lineTo(52,-36);
draw.setTransform(ran_size,0,0,ran_size,ran_x,y)
draw.stroke();
draw.fill();
draw.closePath();
}
/*调用函数进行绘画*/
/*首先书写产生飞机数量，令飞机进行运动的函数*/
/*初始化飞机位置的函数*/
var ran_size=1;
var ran_x=can.width/2;
var y=can.height/2;
plan(ran_size,ran_x,y);
/*鼠标控制*/
function keydown(e){
e=e||event;
var code=e.keyCode||e.which;
if(code==”37″&&ran_x>=50){ran_x-=25;draw.clearRect(-500,-500,1000,1000);plan(ran_size,ran_x,y);}/*左*/
if(code==”38″&&y>50){y-=25;draw.clearRect(-500,-500,1000,1000);plan(ran_size,ran_x,y); }/*上*/
if(code==”39″&&ran_x<=(can.width-50)){ran_x+=25;draw.clearRect(-500,-500,1000,1000);plan(ran_size,ran_x,y);}/*右*/
if(code==”40″&&y<can.height-50){y+=25;draw.clearRect(-500,-500,1000,1000);plan(ran_size,ran_x,y); }/*下*/
}
document.onkeydown =keydown;
</script>
</html>
可以通过调整plan(ran_size,ran_x,y);中的参数，控制大小和初始位置。代码后面的部分实现的功能是通过操作键盘的上下左右，实现飞机的控制
