html5飞机发射教程,使用html5的Canvas功能绘制飞机图像实例

飞机

canvas{background:#000;}

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

}

document.onkeydown =keydown;

可以通过调整plan(ran_size,ran_x,y);中的参数，控制大小和初始位置。代码后面的部分实现的功能是通过操作键盘的上下左右，实现飞机的控制