学了一些HTML5的一些基本知识，开始学习制作......
介绍一些基本知识： px(像素)---》1px等于多少？ 1cm or 2cm -->no no no!
(1).像素是一个密度单位：无法用度量....
(2) stoke--->画线 fill--->填充
(3)再画图形时，一定记得路径闭合...
(4)在绘制图片时:需要注意的是：先加载图片，在进行绘制
绘制照片的一些基本步骤：
（1） 创建image对象 new Image();
（2）指定图片（或者路径） src=" "
（3）先加载，再进行一段绘制 dirawImage();
代码详细的注释：
1 <html> 2 <head> 3 4 </head> 5 <body> 6 <!--用canvas画布画一个矩形--> 7 <canvas id="gxjun"width="500px"height="400px"style="border: 2px solid blue"></canvas> 8 <script type="text/javascript"> 9 <!--得到画布--> 10 var canvas_1=document.getElementById("gxjun"); 11 var cnt=canvas_1.getContext("2d"); 12 //alert(cxt); 13 //moveto设置点位置 14 cnt.moveTo(20,20); 15 //有上面那个点为起点 设置第二个点位置 16 cnt.lineTo(20,90); 17 //将两个点连接起来 18 cnt.stroke(); 19 //画出一个填充的三角形.-->路径 20 //开始新路径 21 cnt.beginPath(); 22 cnt.moveTo(40,20); 23 cnt.lineTo(40,90); 24 cnt.lineTo(80,90); 25 //闭合路径，把最后这个点和第一点MoveTO()闭合 26 cnt.closePath(); 27 //cnt.stroke(); 28 //填充矩形 由于三角形闭合了，所以填充了三角形 29 //注意的一点是： 只有矩形才会不用路径闭合 30 cnt.fill(); 31 cnt.strokeRect(100,20,30,50); //strokeRect(x,y,weidth,height); 32 //填充矩形 33 cnt.fillStyle="#004DFF"; //填充颜色 34 cnt.fillRect(140,20,30,50); 35 //画其他图形时一定的记得开始和闭合 36 cnt.beginPath(); 37 //如何话圆形 arc函数 38 //这些参数的含义(x,y,radius,开始度数,结束的度 针还是逆时 39 cnt.fillStyle="#FF0000"; 40 cnt.arc(220,40,20,0,360,false); cnt.closePath(); 41 cnt.stroke(); 42 cnt.fill(); 43 //画图像 44 var img_1=new Image(); 45 img_1.src="10.jpg"; 46 //加载完毕后再绘图.... 47 img_1.onload=function(){ 48 //(object,x,y,weidth,height) 49 cnt.drawImage(img_1,20,100,155,220); 50 } 51 </script> 52 </body> 53 </html>
效果图：
有关Javascript写字体：
代码：
1 <html> 2 <head》</head> 3 <body> 4 <!--用canvas画布画一个矩形--> 5 <canvas id="gxjun"width="500px"height="400px"style="border: 2px solid blue"></canvas> 6 <script type="text/javascript"> 7 <!--得到画布--> 8 var canvas_1=document.getElementById("gxjun"); 9 var cnt=canvas_1.getContext("2d"); 10 //alert(cxt); 11 //moveto设置点位置 12 cnt.moveTo(20,20); 13 //有上面那个点为起点 设置第二个点位置 14 cnt.lineTo(20,90); 15 //将两个点连接起来 16 cnt.stroke(); 17 //画出一个填充的三角形.-->路径 18 //开始新路径 19 cnt.beginPath(); 20 cnt.moveTo(40,20); 21 cnt.lineTo(40,90); 22 cnt.lineTo(80,90); 23 //闭合路径，把最后这个点和第一点MoveTO()闭合 24 cnt.closePath(); 25 //cnt.stroke(); 26 //填充矩形 由于三角形闭合了，所以填充了三角形 27 //注意的一点是： 只有矩形才会不用路径闭合 28 cnt.fill(); 29 cnt.strokeRect(100,20,30,50); //strokeRect(x,y,weidth,height); 30 //填充矩形 31 cnt.fillStyle="#004DFF"; //填充颜色 32 cnt.fillRect(140,20,30,50); 33 //画其他图形时一定的记得开始和闭合 34 cnt.beginPath(); 35 //如何话圆形 arc函数 36 //这些参数的含义(x,y,radius,开始度数,结束的度 针还是逆时 37 cnt.fillStyle="#FF0000"; 38 cnt.arc(220,40,20,0,360,false); cnt.closePath(); 39 cnt.stroke(); 40 cnt.fill(); 41 //画图像 42 var img_1=new Image(); 43 img_1.src="10.jpg"; 44 //加载完毕后再绘图.... 45 img_1.onload=function(){ 46 //(object,x,y,weidth,height) 47 cnt.drawImage(img_1,20,100,155,220); 48 //在画布上写字 49 //设置字体的大小 50 var text="火影忍着之战国时代" 51 cnt.fillStyle="#0000FF"; 52 cnt.font="30px 华文彩云"; 53 cnt.fillText(text,200,200); 54 } 55 </script> 56 </body> 57 </html>>
效果图：
1.画坦克的思路：
以坦克的左上角为参照点，然后画出坦克的其它部分。这样的
好处是当左上角的坐标变换，坦克就会整体移动。（画出图片时比较耗费cpu）
画出第一辆坦克..
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--meta charset="utf-16"/--> 5 </head> 6 <body> 7 <h1>经典坦克大战</h1> 8 <!--画布即作为坦克大战的地图--> 9 <canvas id="tankMap" width="600px" height="500px" 10 style="background-color: black; border: 2px solid red"></canvas> 11 <script type="text/javascript"> 12 //得到画布 13 var canvas1=document.getElementById("tankMap"); 14 //得到绘图上下文（即画笔） 15 var cxt=canvas1.getContext("2d"); 16 //我的坦克hero 17 var herox=130; 18 var heroy=30; 19 // alert(cxt); 20 //设置颜色 21 cxt.fillStyle="#DED284"; 22 //先画出左面的矩形 23 cxt.fillRect(herox,heroy,5,30); 24 //平移画出右边的矩形 25 cxt.fillRect(herox+15,heroy,5,30); 26 //画出中间矩形 27 cxt.fillRect(herox +6,heroy + 5,8,20); 28 //画出坦克的盖子 29 cxt.fillStyle="#FFD972"; 30 cxt.arc(herox +10,heroy +15,4,0,360,true); 31 cxt.fill(); 32 //画出炮筒（直线） 33 cxt.strokeStyle="#FFD972"; 34 cxt.lineWidth=1.5; 35 cxt.beginPath(); 36 cxt.moveTo(herox +10,heroy +15); 37 cxt.lineTo(herox +10,heroy); 38 cxt.closePath(); 39 cxt.stroke(); 40 cxt.fillStyle="#FFD972"; 41 cxt.arc(herox +10,heroy,1.5,0,360,true); 42 cxt.fill(); 43 </script> 44 </body> 45 </html>
效果图：
附加一个小功能，让小球开始移动....
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 //meta charset="utf-8"; 5 </head> 6 <!--当按键后去调用test函数--> 7 <body onkeydown="test()"> 8 <h1>小球上下左右移动</h1> 9 <canvas id="test" width="400px" height="300px" 10 style="background-color:black; border: 2px solid blue"> 11 </canvas> 12 <script type="text/javascript"> 13 //得到画布 14 var canvas1=document.getElementById("test"); 15 //得到绘图上下文（画笔） 16 var cxt= canvas1.getContext("2d"); 17 //画出红色圆球 18 var ballx=30; 19 var bally=30; 20 function drawball() 21 { 22 cxt.beginPath(); 23 cxt.fillStyle="#FF0000"; 24 cxt.arc(ballx,bally,10,0,360,false); 25 cxt.closePath(); 26 cxt.fill(); 27 } 28 //alert(cxt); 29 //现在我摁下wsaf依次表示上下左右- 30 //说明：当我们按下一个建，实际上触发一个onkeydowm 31 drawball(); 32 function test(){ 33 //我怎么知道，玩家按下的是什么键 34 //说明当按下键后，事件---》event对象----》事件处理函数（） 35 var code=event.keyCode; 36 //键盘上的每一个字母对应的是ascii 37 switch(code) 38 { 39 case 87: bally--; break; 40 case 68: ballx++; break; 41 case 83: bally++; break; 42 case 65: ballx--; break; 43 } 44 cxt.clearRect(0,0,400,300); 45 drawball(); 46 } 47 </script> 48 </body> 49 </html>
效果如图：
好了，又小球衍生出第一辆坦克....
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--meta charset="utf-16"/--> 5 </head> 6 <body onkeydown="getCommand()"> 7 <h1>经典坦克大战</h1> 8 <!--画布即作为坦克大战的地图--> 9 <canvas id="tankMap" width="600px" height="500px" 10 style="background-color: black; border: 2px solid red"></canvas> 11 <script type="text/javascript"> 12 //定义一个HEro类 13 // x,y表示坐标 direct表示方向 14 function Hero(x,y,direct){ 15 this.x=x; 16 this.y=y; 17 this.direct=direct; 18 this.speed=1; 19 //上移 20 this.moveUp=function() { 21 this.y-=this.speed; 22 this.direct=0; 23 } 24 this.moveDown=function(){ 25 this.y+=this.speed; 26 this.direct=2; 27 } 28 this.moveRight=function(){ 29 this.x+=this.speed; 30 this.direct=1; 31 } 32 this.moveLeft=function() { 33 this.x-=this.speed; 34 this.direct=3; //改变方向 35 } 36 } 37 //得到画布 38 var canvas1=document.getElementById("tankMap"); 39 //得到绘图上下文（即画笔） 40 var cxt=canvas1.getContext("2d"); 41 //我的坦克hero 42 // var herox=130; 43 //var heroy=30; 44 // alert(cxt); 45 //坦克的方向:0表示向上,1表示向右,2表示下,3表示左 46 var hero = new Hero(40,40,0); 47 //把绘制坦克封装成为一个函数 48 function drawTank(tank){ 49 50 switch(tank.direct) 51 { 52 case 0: //塔克 53 case 2: 54 //设置颜色 55 cxt.fillStyle="#BA9658" ; 56 //先画出左面的矩形 57 cxt.fillRect(tank.x,tank.y,5,30); 58 //平移画出右边的矩形 59 cxt.fillRect(tank.x+15,tank.y,5,30); 60 //画出中间矩形 61 cxt.fillRect(tank.x +5,tank.y+ 5,10,20); 62 //画出坦克的盖子 63 cxt.fillStyle="#FEF26E" ; 64 cxt.arc(tank.x +10,tank.y +15,4,0,360,false); 65 cxt.fill(); 66 //画出炮筒（直线） 67 cxt.strokeStyle="#FEF26E" ; 68 cxt.lineWidth=1.5; 69 cxt.beginPath(); 70 cxt.moveTo(tank.x +10,tank.y +15); 71 var cnt=0; 72 if(tank.direct==0) cnt=0; 73 else if(tank.direct==2)cnt=30; 74 cxt.lineTo(tank.x +10,tank.y+cnt); 75 break; 76 case 1: 77 case 3: 78 //设置颜色 79 cxt.fillStyle="#BA9658" ; 80 //先画出左面的矩形 81 cxt.fillRect(tank.x,tank.y,30,5); 82 //平移画出右边的矩形 83 cxt.fillRect(tank.x,tank.y+15,30,5); 84 //画出中间矩形 85 cxt.fillRect(tank.x +6,tank.y+ 5,20,10); 86 //画出坦克的盖子 87 cxt.fillStyle="#FEF26E" ; 88 cxt.arc(tank.x +15,tank.y +10,4,0,360,false); 89 cxt.fill(); 90 //画出炮筒（直线） 91 cxt.strokeStyle="#FEF26E" ; 92 cxt.lineWidth=1.5; 93 cxt.beginPath(); 94 cxt.moveTo(tank.x +15,tank.y +10); 95 if(tank.direct==1) 96 cxt.lineTo(tank.x +30,tank.y+10); 97 else if(tank.direct==3) 98 cxt.lineTo(tank.x,tank.y+10); 99 // cxt.fillStyle="#FEF26E" ; 100 //cxt.beginPath(); 101 //cxt.arc(tank.x +10,tank.y+cnt,1.5,0,360,false); 102 //cxt.closePath(); 103 //cxt.fill(); 104 105 106 break; 107 108 } 109 cxt.closePath(); 110 cxt.stroke(); 111 112 113 } 114 drawTank(hero); 115 //这是一个接收按键的函数 116 function getCommand(){ 117 //alert("汗啊"); 118 var code = event.keyCode; 119 // alert(code); 120 switch(code) 121 { 122 // 向上 123 case 38: 124 case 87: hero.moveUp(); break; 125 //向左 126 case 37: 127 case 65: hero.moveLeft(); break; 128 //向下 129 case 40: 130 case 83: hero.moveDown(); break; 131 //向右 132 case 39: 133 case 68: hero.moveRight(); break; 134 } 135 cxt.clearRect(0,0,600,500); 136 drawTank(hero); 137 } 138 </script> 139 </body> 140 </html>
效果图：
当然想韩老师所说的我们可以将其分为两个文件。一个js文件和一个html文件：
其实内容没有任何变化，就只是将其拆分为两部分只是为了看起来方便一些》。。。
1.tankgame2.js文件
1 // x,y表示坐标 direct表示方向 2 function Hero(x,y,direct){ 3 this.x=x; 4 this.y=y; 5 this.direct=direct; 6 this.speed=1; 7 //上移 8 this.moveUp=function() { 9 this.y-=this.speed; 10 this.direct=0; 11 } 12 this.moveDown=function(){ 13 this.y+=this.speed; 14 this.direct=2; 15 } 16 this.moveRight=function(){ 17 this.x+=this.speed; 18 this.direct=1; 19 } 20 this.moveLeft=function() { 21 this.x-=this.speed; 22 this.direct=3; //改变方向 23 } 24 } 25 26 //把绘制坦克封装成为一个函数 27 function drawTank(tank){ 28 29 switch(tank.direct) 30 { 31 case 0: //塔克 32 case 2: 33 //设置颜色 34 cxt.fillStyle="#BA9658" ; 35 //先画出左面的矩形 36 cxt.fillRect(tank.x,tank.y,5,30); 37 //平移画出右边的矩形 38 cxt.fillRect(tank.x+15,tank.y,5,30); 39 //画出中间矩形 40 cxt.fillRect(tank.x +5,tank.y+ 5,10,20); 41 //画出坦克的盖子 42 cxt.fillStyle="#FEF26E" ; 43 cxt.arc(tank.x +10,tank.y +15,4,0,360,false); 44 cxt.fill(); 45 //画出炮筒（直线） 46 cxt.strokeStyle="#FEF26E" ; 47 cxt.lineWidth=1.5; 48 cxt.beginPath(); 49 cxt.moveTo(tank.x +10,tank.y +15); 50 var cnt=0; 51 if(tank.direct==0) cnt=0; 52 else if(tank.direct==2)cnt=30; 53 cxt.lineTo(tank.x +10,tank.y+cnt); 54 break; 55 case 1: 56 case 3: 57 //设置颜色 58 cxt.fillStyle="#BA9658" ; 59 //先画出左面的矩形 60 cxt.fillRect(tank.x,tank.y,30,5); 61 //平移画出右边的矩形 62 cxt.fillRect(tank.x,tank.y+15,30,5); 63 //画出中间矩形 64 cxt.fillRect(tank.x +6,tank.y+ 5,20,10); 65 //画出坦克的盖子 66 cxt.fillStyle="#FEF26E" ; 67 cxt.arc(tank.x +15,tank.y +10,4,0,360,false); 68 cxt.fill(); 69 //画出炮筒（直线） 70 cxt.strokeStyle="#FEF26E" ; 71 cxt.lineWidth=1.5; 72 cxt.beginPath(); 73 cxt.moveTo(tank.x +15,tank.y +10); 74 if(tank.direct==1) 75 cxt.lineTo(tank.x +30,tank.y+10); 76 else if(tank.direct==3) 77 cxt.lineTo(tank.x,tank.y+10); 78 // cxt.fillStyle="#FEF26E" ; 79 //cxt.beginPath(); 80 //cxt.arc(tank.x +10,tank.y+cnt,1.5,0,360,false); 81 //cxt.closePath(); 82 //cxt.fill(); 83 84 85 break; 86 87 } 88 cxt.closePath(); 89 cxt.stroke(); 90 91 92 }
2.html文件...
代码：
<!DOCTYPE html> <html> <head> <!--meta charset="utf-16"/--> </head> <body onkeydown="getCommand()"> <h1>经典坦克大战</h1> <!--画布即作为坦克大战的地图--> <canvas id="tankMap" width="600px" height="500px" style="background-color: black; border: 2px solid red"></canvas> <script type="text/javascript" src="tankgame2.js"></script> <script type="text/javascript"> //定义一个HEro类 //得到画布 var canvas1=document.getElementById("tankMap"); //得到绘图上下文（即画笔） var cxt=canvas1.getContext("2d"); //我的坦克hero // var herox=130; //var heroy=30; // alert(cxt); //坦克的方向:0表示向上,1表示向右,2表示下,3表示左 var hero = new Hero(40,40,0); drawTank(hero); //这是一个接收按键的函数 function getCommand(){ //alert("汗啊"); var code = event.keyCode; // alert(code); switch(code) { // 向上 case 38: case 87: hero.moveUp(); break; //向左 case 37: case 65: hero.moveLeft(); break; //向下 case 40: case 83: hero.moveDown(); break; //向右 case 39: case 68: hero.moveRight(); break; } cxt.clearRect(0,0,600,500); drawTank(hero); } </script> </body> </html>
效果图还是一样的
