HTML 5游戏开发案例教程
第1章 构建Canvas开发环境
添加注释的方法：
在H5中采用<!-- -->的方式添加。
在function中采用“//”进行单行注释。
在Script中采用“//”进行单行注释。
canvas简介：
HTML 5 <canvas>标签用于绘制图像（通过脚本，通常是JavaScript）。不过<canvas>标签本身不具有绘制能力（它仅仅是图形的容器），必须使用脚本来完成实际的绘图任务。GetContext()方法可返回对象，该对象提供了用于在画布上绘图的属性和方法。
开发服务器：XAMPP
开发工具：Adobe Dreamweaver cs6\IntelliJ IDEA
第2章 Canvas基 本功能
2.1.1 定义canvas标签
<canvas>标签定义图形，必须是用脚本来绘制图形，默认情况下，该标签没有边框和内容，可以使用style添加边框，标签通常需要指定一个id属性，width和height属性定义画布的大小。可以在html中使用多个<canvas>标签。
2.1.2 获取canvas标签环境上下文
Canvas标签本身是没有绘图能力的，需要在JavaScript中完成。
首先需要找到<canvas>元素； var c=document.getElementById(“myCanvas”);
然后，创建context对象； var ctx=getContext(“2d”);
2.2 canvas 图形
2.2.1绘制canvas路径
1）lineCap 属性设置或返回线条末端线帽的样式
基本语法：context.lineCap=”butt|round|square”;
代码解析：butt为默认。向线条的每个末端加平直的边缘
Round向线条的每个末端添加圆形线帽
Square 向线条的每个末端添加正方形线帽
2）moveTo与lineTo
主要是讲光标移到指定坐标点，绘制直线的时候以这个坐标为起点，用moveTo（x,y）画图到x,y轴的位置
3）绘制矩形
Context.rect（x,y,width,height）;
Context.fillRect （x,y,width,height）;
4）绘制圆形
Context.arc（x,y,r,start,stop）;
5) 绘制贝塞尔曲线
quadraticCurveTo()方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。
基本语法：context.quadraticCurveTo(cpx,cpy,x,y);其中，cpx、cpy指的是贝塞尔控制点的xy坐标，x/y指的是结束点的x/y坐标。
‚bezierCurveTo()方法绘制贝塞尔曲线，通过使用表示三次贝塞尔曲线的指定控制点，想当前路径添加一个点。前两个点是用于三次贝塞尔计算中的控制点，第三点是曲线的结束点。
基本语法：context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);其中，cp1x,cp1y指的是第一贝塞尔曲线控制点的x、y坐标，cp2x,cp2y指的是第二贝塞尔曲线控制点的X/y坐标;x、y指的是结束点的xy坐标。
2.2.2 绘制canvas变形图形
1） createLinerGradient(x,y,x1,y1);创建线条渐变
代码解析：X/y表示渐变点开始的xy坐标，x1/y1表示渐变点结束的x/y坐标
createRadialGratient(x,y,r,x1,y1,r1);创建一个径向圆渐变
代码解析：x/y表示渐变开始圆的Xy坐标，开始圆的半径，x1/y1表示渐变结束圆的xy坐标；r1表示结束圆的半径。
当使用渐变对象时，必须使用两种或两种以上的停止颜色。
2） addColorStop()方法指定颜色停止，参数使用坐标来描述。可以是0至1。
3） 使用scale()绘制变形图形
Scale()方法缩放当前绘图纸最大或更下，对应的语法格式如下示所：
Context.scale(scalewidth,scaleheight);其中，scalewidth表示缩放绘图的宽度（1=100%，0.5=50%，2=200%）；scaleheight表示缩放绘图的高度（1=100%,0.5=50%,2=200%）
4） 使用rotate()方法绘制变形图形
Rotate()方法旋转当前的绘图，对应的语法如下：
Context.rotate（angle）；注意：如需将角度转换为弧度，请使用degree*Math.PI/180;
5） 使用translate()绘制变形图形
Translate()方法冲洗映射画布上的（0,0）位置，当在translate()之后调用诸如fillRect()之类的方法时，值会添加到x和y的坐标值上。
6） 使用transform()绘制变形图形
绘制一个矩形，通过transform()添加一个新的变换矩阵，再次绘制矩形，天际一个新的变换矩形，然后再次绘制矩形。它允许缩放、旋转、移动并倾斜当前的环境。改变换值会影响transform()方法调用之后的绘图。这种行为相当于由rotate()、scale(),translate()或transform()完成的其他变换。
setTransform()语法：context.transform(a,b,c,d,e,f)
A:水平缩放绘图；b水平倾斜绘图；c垂直倾斜绘图；d 垂直缩放绘图；e 水平移动绘图；f 垂直移动绘图。
2.2.3 处理canvas 图形
1）使用globalCompositeOperation参数对图形进行处理
globalCompositeOperation属性设置或返回如何讲一个源（新的）图像绘制到目标（已有的）的图像上，对应的语法格式如下所示：源图像=打算放置到画布上的绘图 目标图像=已经放置在画布上的绘图。
值 |
描述 |
Source-over |
默认。在目标图像上显示源图像 |
Source-atop |
在目标图像顶部显示源图像，源图像位于目标图像之外的部分是不可见的 |
Source-in |
在目标图像中显示源图像，只有目标图像之内的源图像部分会显示，目标图像是透明的 |
Source-out |
在目标图像之外现显示源图像，只有目标图像之外的源图像部分会显示，目标图像是透明的 |
Destination-over |
在源图像上显示目标图像 |
Destination-atop |
在源图像顶部现实目标图像，目标图像位于源图像之外的部分是不可见的 |
Destination-in |
在源图像中现实目标图像，只有源图像之内的目标图像部分会被显示，源图像是透明的 |
Destination-out |
在源图像之外显示目标图像，只有源图像之外的目标图像部分会被显示，源图像是透明的 |
Lighter |
显示源图像+目标图像 |
Copy |
显示源图像。忽略目标图像 |
Xor |
使用异或操作对源图像与目标图像进行组合。 |
1） 使用shadowColor参数对图形进行处理，要将shadowColor与shadowBlur属性一起使用，才能创建阴影。
Ctx.shadowBlur = 10;
Ctx.shadowOffsetX = 20;
Ctx.shadowColor = “black”;
Ctx.fillStyle = “red”;
Ctx.fillRect (20,20,100,80);
代码解析：
shadowBlur属性设置或返回阴影的模糊级数；
shadowOffsetX属性设置或返回阴影与形状的水平距离。（shadowOffsetX=0 指示阴影位于形状的正下方；shadowOffsetX=20 指示阴影为与形状left位置右侧的20像素处。shadowOffsetX=-20 指示阴影位于形状left位置左侧的20像素处。）
shadowColor属性设置或返回用于阴影的颜色
2.3 canvas文本
2.3.1 绘制文字
1） 使用fillText()函数绘制文字
fillText()方法在画布上绘制填色的文本。文本的默认颜色是黑色。语法如下：
Context.fillText(text,x,y,maxWidth);其中，text规定在画布上输出的文本，x/y开始绘制文本的x/y坐标位置（相对于画布）；maxWidth可选，允许的最大文本宽度，以像素计。
<script>
Var c = document.getElementByid(“myCanvas”);
Var ctx = c.getContext(“2d”);
Ctx.font = “20px Georgia”;
Ctx.fillText (“Hello World!”,10,50);
Ctx.font = “30px Verdana”;
//Create gradient
Var gradient = ctx.createLinerGradient(0,0,c.width,0);
Gradient.addColorStop(“0”,”magenta”);
Gradient.addColorStop(“0.5”,”blue”);
Gradient.addColorStop(“1.0”,”red”);
//Fill with gradient
Ctx.fillStyle=gradient;
Ctx.fillText(“Big smile!”,10,90);
</script>
2) 使用strokeText()函数绘制文字
strokeText()方法在画布上绘制文本（无填充色）。文本的默认颜色是黑色。语法格式如下：
Context.strokeText（text,x,y,maxWidth）其中，text为规定在画布上输出的文本，xy表示开始绘制文本的x/y坐标位置。maxWidth 可选，允许的最大文本宽度，以像素计。
2.3.2 设置文字格式
值 |
描述 |
Font-style |
规定字体样式，可能的值：normal、italic、oblique |
Font-variant |
规定字体变体。可能的值：normal、small-caps |
Font-weight |
规定字体的粗细。可能的值：normal、bold、bolder、lighter、100/200/300/400/500/600/700/800/900 |
Font-size、line-height |
固定字号和行高，以像素计 |
Font-family |
规定字体系列 |
Caption |
使用标题控件放入字体（比如按钮、下拉列表等） |
icon |
使用用于标记图标的字体 |
Menu |
使用用于菜单中的字体 |
Message-box |
使用用于对话框中的字体 |
Small-caption |
使用用于标记小型控件的字体 |
Status-bar |
使用用于窗口状态栏的字体 |
2.3.3 设置文字对齐方式
1）textAlign 属性根据锚点，设置或返回文本内容的当前对齐方式。通常，文本会从置顶文字开始，不过，如果设置为textAlign=“right”并将文本放置在位置150那么会在位置150结束。
2）文字基线设置
textBaseline属性设置或返回在绘制文本是的当前文本基线。
值 |
描述 |
Alphbetic |
默认。文本极限是普通的字母基线 |
Top |
文本基线是em方框的顶端 |
Hanging |
文本极限是悬挂基线 |
Middle |
文本极限是em方框的正中 |
Ideographic |
文本基线是表意基线 |
Bottom |
文本基线是em方框的底端 |
2.4 canvas 图片
2.4.1 绘制drawImage图片
函数在canvas画布上绘制图像、画布或视频，也能够绘制图像的某些部分，以及增加或减少的图像的尺寸，对应语法格式有两种。
语法一：context.drawImage(img,x,y);在画布上定位图像，并规定图像的宽度和高度。
语法二：context.drawImage(img,x,y,width,height);剪切图像，并在画布上定位被剪切的部分。
语法三：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);其中，img规定要使用的图像、画布或视频；sx/sy可选，开始剪切的x/y坐标位置；swidth/sheight可选，被剪切图像的宽度和高度；x/y，在画布上放置图像的x/y坐标位置；width/height可选，要使用的图像的宽度和高度（伸展或缩小的图像）
2.4.2 使用getImageData()和putImageData()绘制图片
getImageData()函数返回ImageData对象，该对象拷贝了画布指定矩形的像素数据。imageData对象不是图像，它规定了画布上一个部分（矩形），并保持额该矩形内每个像素的信息。对于imageData对象中的每个像素，都存在着四方面的信息。
getImageData()语法：context.getImageData(x,y,width,height)
其中，x/y指的是开始复制的左上角位置的x/y坐标；width与height要复制的矩形区域的宽度和高度。在操作完成数组中的color/alpha信息之后，可以使用putImageData()方法将图像数据放回画布上。
putImageData()语法 context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)
imgData规定要放回画布的Image对象
X/y水平值、垂直值，在画布上放置图像的位置
dirtyX dirtyY可选，imageData对象左上角的x坐标和y坐标
dirtyWidth、dirtyHeight 可选，image对象所截取的宽度和高度