学了一些HTML5的一些基本知识，开始学习制作......
介绍一些基本知识： px(像素)---》1px等于多少？ 1cm or 2cm -->no no no!
(1).像素是一个密度单位：无法用度量....
(2) stoke--->画线 fill--->填充
(3)再画图形时，一定记得路径闭合...
(4)在绘制图片时:需要注意的是：先加载图片，在进行绘制
绘制照片的一些基本步骤：
（1） 创建image对象 new Image();
（2）指定图片（或者路径） src=" "
（3）先加载，再进行一段绘制 dirawImage();
代码详细的注释：
<html>
<head> </head>
<body>
<!--用canvas画布画一个矩形-->
<canvas id="gxjun"width="500px"height="400px"style="border: 2px solid blue"></canvas>
<script type="text/javascript">
<!--得到画布-->
var canvas_1=document.getElementById("gxjun");
var cnt=canvas_1.getContext("2d");
//alert(cxt);
//moveto设置点位置
cnt.moveTo(20,20);
//有上面那个点为起点 设置第二个点位置
cnt.lineTo(20,90);
//将两个点连接起来
cnt.stroke();
//画出一个填充的三角形.-->路径
//开始新路径
cnt.beginPath();
cnt.moveTo(40,20);
cnt.lineTo(40,90);
cnt.lineTo(80,90);
//闭合路径，把最后这个点和第一点MoveTO()闭合
cnt.closePath();
//cnt.stroke();
//填充矩形 由于三角形闭合了，所以填充了三角形
//注意的一点是： 只有矩形才会不用路径闭合
cnt.fill();
cnt.strokeRect(100,20,30,50); //strokeRect(x,y,weidth,height);
//填充矩形
cnt.fillStyle="#004DFF"; //填充颜色
cnt.fillRect(140,20,30,50);
//画其他图形时一定的记得开始和闭合
cnt.beginPath();
//如何话圆形 arc函数
//这些参数的含义(x,y,radius,开始度数,结束的度 针还是逆时
cnt.fillStyle="#FF0000";
cnt.arc(220,40,20,0,360,false); cnt.closePath();
cnt.stroke();
cnt.fill();
//画图像
var img_1=new Image();
img_1.src="10.jpg";
//加载完毕后再绘图....
img_1.onload=function(){
//(object,x,y,weidth,height)
cnt.drawImage(img_1,20,100,155,220);
}
</script>
</body>
</html>
效果图：
有关Javascript写字体：
代码：
<html>
<head》</head>
<body>
<!--用canvas画布画一个矩形-->
<canvas id="gxjun"width="500px"height="400px"style="border: 2px solid blue"></canvas>
<script type="text/javascript">
<!--得到画布-->
var canvas_1=document.getElementById("gxjun");
var cnt=canvas_1.getContext("2d");
//alert(cxt);
//moveto设置点位置
cnt.moveTo(,);
//有上面那个点为起点 设置第二个点位置
cnt.lineTo(,);
//将两个点连接起来
cnt.stroke();
//画出一个填充的三角形.-->路径
//开始新路径
cnt.beginPath();
cnt.moveTo(,);
cnt.lineTo(,);
cnt.lineTo(,);
//闭合路径，把最后这个点和第一点MoveTO()闭合
cnt.closePath();
//cnt.stroke();
//填充矩形 由于三角形闭合了，所以填充了三角形
//注意的一点是： 只有矩形才会不用路径闭合
cnt.fill();
cnt.strokeRect(,,,); //strokeRect(x,y,weidth,height);
//填充矩形
cnt.fillStyle="#004DFF"; //填充颜色
cnt.fillRect(,,,);
//画其他图形时一定的记得开始和闭合
cnt.beginPath();
//如何话圆形 arc函数
//这些参数的含义(x,y,radius,开始度数,结束的度 针还是逆时
cnt.fillStyle="#FF0000";
cnt.arc(,,,,,false); cnt.closePath();
cnt.stroke();
cnt.fill();
//画图像
var img_1=new Image();
img_1.src="10.jpg";
//加载完毕后再绘图....
img_1.onload=function(){
//(object,x,y,weidth,height)
cnt.drawImage(img_1,,,,);
//在画布上写字
//设置字体的大小
var text="火影忍着之战国时代"
cnt.fillStyle="#0000FF";
cnt.font="30px 华文彩云";
cnt.fillText(text,,);
}
</script>
</body>
</html>>
效果图：
1.画坦克的思路：
以坦克的左上角为参照点，然后画出坦克的其它部分。这样的
好处是当左上角的坐标变换，坦克就会整体移动。（画出图片时比较耗费cpu）
画出第一辆坦克..
代码：
<!DOCTYPE html>
<html>
<head>
<!--meta charset="utf-16"/-->
</head>
<body>
<h1>经典坦克大战</h1>
<!--画布即作为坦克大战的地图-->
<canvas id="tankMap" width="600px" height="500px"
style="background-color: black; border: 2px solid red"></canvas>
<script type="text/javascript">
//得到画布
var canvas1=document.getElementById("tankMap");
//得到绘图上下文（即画笔）
var cxt=canvas1.getContext("2d");
//我的坦克hero
var herox=130;
var heroy=30;
// alert(cxt);
//设置颜色
cxt.fillStyle="#DED284";
//先画出左面的矩形
cxt.fillRect(herox,heroy,5,30);
//平移画出右边的矩形
cxt.fillRect(herox+15,heroy,5,30);
//画出中间矩形
cxt.fillRect(herox +6,heroy + 5,8,20);
//画出坦克的盖子
cxt.fillStyle="#FFD972";
cxt.arc(herox +10,heroy +15,4,0,360,true);
cxt.fill();
//画出炮筒（直线）
cxt.strokeStyle="#FFD972";
cxt.lineWidth=1.5;
cxt.beginPath();
cxt.moveTo(herox +10,heroy +15);
cxt.lineTo(herox +10,heroy);
cxt.closePath();
cxt.stroke();
cxt.fillStyle="#FFD972";
cxt.arc(herox +10,heroy,1.5,0,360,true);
cxt.fill();
</script>
</body>
</html>
效果图：
附加一个小功能，让小球开始移动....
代码：
<!DOCTYPE html>
<html>
<head>
//meta charset="utf-8";
</head>
<!--当按键后去调用test函数-->
<body onkeydown="test()">
<h1>小球上下左右移动</h1>
<canvas id="test" width="400px" height="300px"
style="background-color:black; border: 2px solid blue">
</canvas>
<script type="text/javascript">
//得到画布
var canvas1=document.getElementById("test");
//得到绘图上下文（画笔）
var cxt= canvas1.getContext("2d");
//画出红色圆球
var ballx=30;
var bally=30;
function drawball()
{
cxt.beginPath();
cxt.fillStyle="#FF0000";
cxt.arc(ballx,bally,10,0,360,false);
cxt.closePath();
cxt.fill();
}
//alert(cxt);
//现在我摁下wsaf依次表示上下左右-
//说明：当我们按下一个建，实际上触发一个onkeydowm
drawball();
function test(){
//我怎么知道，玩家按下的是什么键
//说明当按下键后，事件---》event对象----》事件处理函数（）
var code=event.keyCode;
//键盘上的每一个字母对应的是ascii
switch(code)
{
case 87: bally--; break;
case 68: ballx++; break;
case 83: bally++; break;
case 65: ballx--; break;
}
cxt.clearRect(0,0,400,300);
drawball();
}
</script>
</body>
</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">
//定义一个HEro类
// x,y表示坐标 direct表示方向
function Hero(x,y,direct){
this.x=x;
this.y=y;
this.direct=direct;
this.speed=1;
//上移
this.moveUp=function() {
this.y-=this.speed;
this.direct=0;
}
this.moveDown=function(){
this.y+=this.speed;
this.direct=2;
}
this.moveRight=function(){
this.x+=this.speed;
this.direct=1;
}
this.moveLeft=function() {
this.x-=this.speed;
this.direct=3; //改变方向
}
}
//得到画布
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);
//把绘制坦克封装成为一个函数
function drawTank(tank){ switch(tank.direct)
{
case 0: //塔克
case 2:
//设置颜色
cxt.fillStyle="#BA9658" ;
//先画出左面的矩形
cxt.fillRect(tank.x,tank.y,5,30);
//平移画出右边的矩形
cxt.fillRect(tank.x+15,tank.y,5,30);
//画出中间矩形
cxt.fillRect(tank.x +5,tank.y+ 5,10,20);
//画出坦克的盖子
cxt.fillStyle="#FEF26E" ;
cxt.arc(tank.x +10,tank.y +15,4,0,360,false);
cxt.fill();
//画出炮筒（直线）
cxt.strokeStyle="#FEF26E" ;
cxt.lineWidth=1.5;
cxt.beginPath();
cxt.moveTo(tank.x +10,tank.y +15);
var cnt=0;
if(tank.direct==0) cnt=0;
else if(tank.direct==2)cnt=30;
cxt.lineTo(tank.x +10,tank.y+cnt);
break;
case 1:
case 3:
//设置颜色
cxt.fillStyle="#BA9658" ;
//先画出左面的矩形
cxt.fillRect(tank.x,tank.y,30,5);
//平移画出右边的矩形
cxt.fillRect(tank.x,tank.y+15,30,5);
//画出中间矩形
cxt.fillRect(tank.x +6,tank.y+ 5,20,10);
//画出坦克的盖子
cxt.fillStyle="#FEF26E" ;
cxt.arc(tank.x +15,tank.y +10,4,0,360,false);
cxt.fill();
//画出炮筒（直线）
cxt.strokeStyle="#FEF26E" ;
cxt.lineWidth=1.5;
cxt.beginPath();
cxt.moveTo(tank.x +15,tank.y +10);
if(tank.direct==1)
cxt.lineTo(tank.x +30,tank.y+10);
else if(tank.direct==3)
cxt.lineTo(tank.x,tank.y+10);
// cxt.fillStyle="#FEF26E" ;
//cxt.beginPath();
//cxt.arc(tank.x +10,tank.y+cnt,1.5,0,360,false);
//cxt.closePath();
//cxt.fill(); break; }
cxt.closePath();
cxt.stroke(); }
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>
效果图：
当然想韩老师所说的我们可以将其分为两个文件。一个js文件和一个html文件：
其实内容没有任何变化，就只是将其拆分为两部分只是为了看起来方便一些》。。。
1.tankgame2.js文件
// x,y表示坐标 direct表示方向
function Hero(x,y,direct){
this.x=x;
this.y=y;
this.direct=direct;
this.speed=1;
//上移
this.moveUp=function() {
this.y-=this.speed;
this.direct=0;
}
this.moveDown=function(){
this.y+=this.speed;
this.direct=2;
}
this.moveRight=function(){
this.x+=this.speed;
this.direct=1;
}
this.moveLeft=function() {
this.x-=this.speed;
this.direct=3; //改变方向
}
} //把绘制坦克封装成为一个函数
function drawTank(tank){ switch(tank.direct)
{
case 0: //塔克
case 2:
//设置颜色
cxt.fillStyle="#BA9658" ;
//先画出左面的矩形
cxt.fillRect(tank.x,tank.y,5,30);
//平移画出右边的矩形
cxt.fillRect(tank.x+15,tank.y,5,30);
//画出中间矩形
cxt.fillRect(tank.x +5,tank.y+ 5,10,20);
//画出坦克的盖子
cxt.fillStyle="#FEF26E" ;
cxt.arc(tank.x +10,tank.y +15,4,0,360,false);
cxt.fill();
//画出炮筒（直线）
cxt.strokeStyle="#FEF26E" ;
cxt.lineWidth=1.5;
cxt.beginPath();
cxt.moveTo(tank.x +10,tank.y +15);
var cnt=0;
if(tank.direct==0) cnt=0;
else if(tank.direct==2)cnt=30;
cxt.lineTo(tank.x +10,tank.y+cnt);
break;
case 1:
case 3:
//设置颜色
cxt.fillStyle="#BA9658" ;
//先画出左面的矩形
cxt.fillRect(tank.x,tank.y,30,5);
//平移画出右边的矩形
cxt.fillRect(tank.x,tank.y+15,30,5);
//画出中间矩形
cxt.fillRect(tank.x +6,tank.y+ 5,20,10);
//画出坦克的盖子
cxt.fillStyle="#FEF26E" ;
cxt.arc(tank.x +15,tank.y +10,4,0,360,false);
cxt.fill();
//画出炮筒（直线）
cxt.strokeStyle="#FEF26E" ;
cxt.lineWidth=1.5;
cxt.beginPath();
cxt.moveTo(tank.x +15,tank.y +10);
if(tank.direct==1)
cxt.lineTo(tank.x +30,tank.y+10);
else if(tank.direct==3)
cxt.lineTo(tank.x,tank.y+10);
// cxt.fillStyle="#FEF26E" ;
//cxt.beginPath();
//cxt.arc(tank.x +10,tank.y+cnt,1.5,0,360,false);
//cxt.closePath();
//cxt.fill(); break; }
cxt.closePath();
cxt.stroke(); }
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>
效果图还是一样的
