本人是在校学生，由于这段时间不知道怎么回事，心情比较无聊没有事干，所以利用这段时间学一下HTML5,发博客的目的是为了以后可以查询，也希望各位大神能够指导像我们这样的菜鸟，告别菜鸟的时段
我学东西时候有一个习惯，就是把已学知识做一个东西出来，这样可以提高兴趣，于是想起XNA 的游戏结构，想通过这个结构用HTML 写一个游戏引擎，本人是菜鸟 不要指望我有多么厉害
首先我们必须掌握HTML5的一些基本知识，：
canvas: 在HTML5中新增的元素，他相当与游戏中的场景或者画布，想这样编程方面的东西 代码 胜过文语
<!DOCTYPE html> <meta charset="utf-8"> <html> <head> <title></title> <script type="text/javascript" src="NANF.js"></script> <script type="text/javascript"> $$(function(){ //得到canvas元素 var c=document.getElementById("myCanvas"); //得到画布 var ctx= c.getContext("2d"); //擦除画布 ctx.clearRect(0,0,400,400); ctx.fillStyle="red"; ctx.fillRect(20,20,75,50); //这里处理两个矩形谁在上， source-over 原矩形在上 ctx.globalCompositeOperation="source-over"; ctx.fillStyle="blue"; ctx.fillRect(50,50,75,50); ctx.globalCompositeOperation="destination-over"; ctx.fillStyle="yellow"; ctx.fillRect(30,30,75,50); // destination-over 目标矩形在上 ctx.globalCompositeOperation="destination-over"; var img=new Image(); img.src="jian.png"; //画图 ctx.drawImage(img,0,0,200,200); }); </script> </head> <body onload=""> <canvas id="myCanvas"></canvas> </body> </html>
上面的代码有一个地方要搞清楚 ctx.globalCompositeOperation="source-over"; 各个画东西相交处的处理方式，更多地方
参考HTML5 w3c 文档
下面要讲到的是一张图片的切片：
大家有没有注意 动画的基本原理是一系列图片组成的。。而这些图片都在一张图片上，通过切片的方式 ，可以循环画出指定动作的图片，这里就不用代码演示了，说一下函数就行了
ctx.drawImage(image,sourceX,sourceY,sourceWidth,sourceHeigh,dwX,dwY,dwWidth,dwHeigth);
image: 是一个图片对象
sourceX，sourceY，sourceWidth，sourceHeigh,这四个参数在图片上指定一个区域，画的时候就画那个区域
dwX,dwY:这画布上指定 x 轴 和 y 轴
dwWidth ， dwHeigth ：图片上指定一个区域图片 画在 画布上宽高
最后我们介绍一下图片变形
ctx.translate(x,y) : 这是平移函数
ctx.rotate(Ang) : 按弧度旋转
ctx.scale(x,y) : 按x,y 方向进行缩放
上面这些 函数 学了一下Gui 的人都知道。。。。。我就不过多的解释了，不过下面介绍的函数我会贴出代码来,因为是做游戏的核心。
是否大家玩游戏的时候有没有注意到 （天龙八部，斗战神） 瀑布的水，河里的水 他们的流动好逼真，用上面的一个函数是很难做到的，所以我们要根据顶点来画图。 有没有有人知道游戏的基元是三角型，三角型有三个顶点 正好组成一个面 ，如果不清楚的可以问度娘和谷爸，废话就不多说了
ctx.createPattern(image,"repeat-y"); 为贴图图像创建一个模式 ；更多内容点击这里
代码：
<!DOCTYPE html> <meta charset="utf-8"> <html> <head> <title></title> <script type="text/javascript" src="NANF.js"></script> <script type="text/javascript"> $$(function(){ //得到canvas元素 var c=document.getElementById("myCanvas"); //得到画布 var context= c.getContext("2d"); //擦除画布 var image=new Image(); image.src="hello.jpg"; var imgPattern=context.createPattern(image,"repeat-y"); //重置路径 context.beginPath(); //设置绘制句柄 context.fillStyle=imgPattern; //绘制路线,第一个点 context.moveTo(50,50); context.lineTo(60,500); context.lineTo(400,400); //绘制路径第四个点 context.lineTo(500,50); context.closePath(); context.fill(); //结束路径 context.closePath(); }); </script> </head> <body onload=""> <canvas width="1366" height="768" id="myCanvas"></canvas> </body> </html>
在绘制路径中可以指定三个点 和 四个顶点 ,对于更多点我试了一次 ，有点不是我想要的结果，我想应该不可以
而下面我要介绍的函数等同于translate，rotate，scale ,他就是:
context.transform(a,b,c,d,e,f) 绘制一个矩形；通过 transform添加一个新的变换矩阵，再次绘制矩形；添加一个新的变换矩阵，然后再次绘制矩形。请注意，每当您调用 transform时，它都会在前一个变换矩阵上构建 ,更多内容点击这里
好了。。。所学的东西总结到这里