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对象所截取的宽度和高度