<学习之路·HTML5游戏开发>第一篇 canvas基础绘制
从这篇日志起，我将会写一系列关于HTML5游戏开发的学习笔记，记载我自今日开始的HTML5学习之路。
本来，我并没有兴趣接触HTML，当然也包括了HTML5，在此之前，我只学习C与C++，学习了简单C++GDI的游戏开发，当然，在GDI领域上也只是一个入门小菜鸟。由于一些原因，现在急需学习开发HTML5的游戏，于是就到CSDN与W3School上找了一些关于HTML5、HTML5中canvas的应用以及JS的相关资料，因为时间紧迫，没有进行系统地学习，仅仅只是找了相关API进行实践，希望这次的学习会给我带来一些收获。
HTML5相对于之前的版本，多了一些标签与其使用方法，这边我只翻阅了canvas相关的资料，从资料中可以得知，canvas也就是画布，可以在页面上创建一个区域进行绘制，包括基础图形的绘制与图片的绘制，当然也包括了图形的填充与字体的绘制。这边提供给大家一个Canvas参考手册的链接，也是w3school中文版网页上的http://w3school.com.cn/tags/html_ref_canvas.asp
首先我们先进行coding环境的搭建，虽然html用记事本也能书写，但是对于我这样缺乏时间的入门者来说，利用一些有补全代码的工具自然会方便的多。由于之前学习C与C++的原因，电脑上装有VS2012，所以就采用了VS2012作为开发环境。（其实在这之前，我一直以为VS2012只有VC、VB和C#的开发环境，这次的学习，总算让我理解了为什么它叫Studio）
打开VS2012后，点击新建项目，从 模板-其他项目类型-Visual Studio 解决方案中可以看到 空白解决方案，我们填好名字，选择号目录，创建它。
在创建好的项目中，我们可以通过解决方案管理器找到创建好的项目，右键-添加-新建项，在打开的页面中，选择HTML文件。
可以看到，VS已经为我们自动填写好了网页的基础标签。
首先，我们使用canvas标签，在<body>中创建一个画布控件。学过html的都知道要声明一个id并设置好宽与高，当然也有像我这样第一次接触html的新人，我们这样做。
<body>
<canvas id="canvas" width="400" height="600" style="border:1px solid black">您的浏览器不支持canvas</canvas>
</body>
可以看到，我们创建了一个id为"canvas"，宽度为400，高度600同时拥有宽度为1的线条绘制的黑色填充边框。保存好，打开网页看看效果。
可以看到这么一个完全空白，边框为黑色的区域，这就是我们创建好的canvas画布。现在，我们为它绘制点什么。
因为本次代码量并不大，省事起见，就将js直接写在该HTML文件的<head>标签中中，当然以后是要写在js中，方便管理与查阅。首先，我们要做的是通过设定好的id得到指定画布，并得到该画布的绘制环境。
var canvas = document.getElementById("canvas");//获取指定画布
var ctx = canvas.getContext("2d");//绘制环境
然后我们以绘制线条为例，通过查询canvas的参考手册，可以得到以下信息：
beginPath() 方法开始一条路径，或重置当前的路径。
moveTo() 方法把路径移动到画布上的指定点，不创建线条。
lineTo() 方法添加一个新点，然后在画布中创建从该点到最后指定点的线条。
stroke() 方法绘制已定义的路径。
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
由这些方法，我们可以书写以下代码来绘制两条平行的长度为50且一条为蓝色一条为红色的线条。
<span style="white-space:pre"> </span>ctx.beginPath();//开始一条路径
ctx.moveTo(100, 100);//移动到100,100
ctx.lineTo(150, 100);//从上个点（100,100）绘制一条线到150,100
ctx.strokeStyle = "blue";//设置笔触颜色为blue
ctx.stroke();//绘制定义好的线条
ctx.beginPath();//开始新的一条路径
ctx.moveTo(100, 150);//移动到100,150
ctx.lineTo(150, 150);//从上个点（100,150）绘制一条线到150,150
ctx.strokeStyle = "red";//设置笔触颜色为red
ctx.stroke();//绘制定义好的线条
写完这些后，我们将其封装到一个函数中，这边命名为draw();并在body标签中定义onload事件，当body onload的时候，调用draw();
现在整个文件代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var draw = function () {
var canvas = document.getElementById("canvas");//获取指定画布
var ctx = canvas.getContext("2d");//绘制环境
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(150, 100);
ctx.strokeStyle = "blue";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100, 150);
ctx.lineTo(150, 150);
ctx.strokeStyle = "red";
ctx.stroke();
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas" width="400" height="600" style="border:1px solid black">您的浏览器不支持canvas</canvas>
</body>
</html>
保存好该文件，用浏览器打开它。这边浏览器最好不要用ie。好像要ie9还是哪个版本之后才支持html5.
我们可以看到绘制情况如下：
啊，大一片空白区域里面只有两条线，不过我们的的确确利用canvas成功绘制出预先设想的结果了。
与绘制线条相似，绘制矩形我们使用rect()与stroke()方法绘制矩形，当然我们也可以用strokeRect()方法绘制，以及fillRect()方法绘制填充矩形。
接下来，我们来试试图片的绘制，添加一点人物的图片给这块空白区域增点色彩。
同样的，我们查询Canvas参考手册，可以得到绘制图片的方法是drawImage(),它被重载为以下3种形式：
1.drawImage(img,x,y);//以（x,y）点为图片的左上角坐标，图片宽高均不变，绘制出完整的图片（如果画布不够大，多出的部分会看不到）
2.drawImage(img,x,y,width,height);//以（x,y）点为图片的左上角坐标，并规定图片的width与height，伸展或缩小显示完整图片
3.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);//以（x,y）点为图片的左上角坐标，并从图片的（sx,sy）点开始截取swidth × sheight大小的区域，以width × height的大小伸展或缩小显示截取的图片
这边我们采用最为简单的第一个方法进行测试，图片选用了我们学校团委的吉祥物----可爱的小葵的两张图片~
var draw = function () {
var canvas = document.getElementById("canvas");//获取指定画布
var ctx = canvas.getContext("2d");//绘制环境
var img1 = new Image();//创建Image对象
var img2 = new Image();//创建Image对象
img1.src = "xk_1.png";//指向第一张小葵图片
ctx.drawImage(img1, 100, 100);//在100,100处绘制第一张图片
img2.src = "xk_2.png";//指向第二张小葵图片
ctx.drawImage(img2, 200, 100);//在200,100处绘制第二张图片
}
这个时候我们直接打开网页，会发现画布是空白一片，遇到这种情况，我们有两种解决方法（这边我还是不理解为什么会导致这样 求大神帮忙解答下）一种是在绘制时对img添加onload方法，在onload中再次drawImage，一种是再次调用draw()函数，总之，要绘制两次。就像这样：
var draw = function () {
var canvas = document.getElementById("canvas");//获取指定画布
var ctx = canvas.getContext("2d");//绘制环境
var img1 = new Image();//创建Image对象
var img2 = new Image();//创建Image对象
img1.src = "xk_1.png";//指向第一张小葵图片
img1.onload = function () {
ctx.drawImage(img1, 100, 100);//在100,100处绘制第一张图片
}
ctx.drawImage(img1, 100, 100);//在100,100处绘制第一张图片
img2.src = "xk_2.png";//指向第二张小葵图片
img2.onload = function () {
ctx.drawImage(img2, 200, 100);//在100,100处绘制第二张图片
}
ctx.drawImage(img2, 200, 100);//在200,100处绘制第二张图片
}
这时，我们打开网页，就能看到两只可爱的小葵在对我们微笑了~
第一篇canvas的基础绘制基本就是这些，其他图形的绘制方法，以及图片重叠绘制，透明度设置都可通过参考手册查询。
谢谢大家的阅读~小菜鸟子旭向各位致敬~~