HTML5游戏开发案例教程课件.pptx

1、开发准备篇开发准备篇第第1章构建章构建Canvas开发环境开发环境1.1 网页游戏概述网页游戏概述从电子游戏的载体来说，电子游戏现在基本分为了3个主要的阵营，第一部分是以电视游戏为主，第二部分是以个人电脑游戏为主，第三部分是以手机和平板为主。而从游戏的玩家数量来说，游戏经历了从单击游戏时代到现在的网络游戏时代。随着互联网的普及，以及电脑硬件的飞速发展，互联网游戏正处于高速发展的时期，特别是网页游戏得到了空前的发展。网页游戏从最早的多用户虚拟空间游戏（Multiple User Domain，MUD，玩家爱称“泥巴游戏”）发展而来，早期的MUD游戏限于技术条件，几乎是纯文字网游，没有图形，全部用

2、文字和字符画来构成。按照维基百科记载，世界上第一款真正意义上的实时多人交互网络MUD游戏“MUD1”，是在1978年，由英国埃塞克斯大学的罗伊特鲁布肖用DEC-10编写的。随着Internet的和HTML语言的飞速发展，纯文字类的游戏翻出历史舞台，丰富多彩的带图像的网页游戏逐渐兴起。现在的一些2D网页游戏几乎能与传统的网络游戏媲美，比如可乐吧弹弹堂第七城市、4299游戏平台、91wan游戏平台、1wan游戏平台等。HTML5被看做是web开发者创建流行web应用的利器，增加了对视频和Canvas 2D的支持。用HTML5的优点主要在于，这个技术可以进行跨平台的使用。比如开发了一款HTML5的游

3、戏，可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台，甚至可以通过封装的技术发放到App Store或Google Play上，所以它的跨平台性非常强大，这也是大多数人对HTML5有兴趣的主要原因。1.2 游戏开发流程游戏开发流程初始化游戏：在整个游戏的开始部分，需要做一些游戏初始化的工作，以便游戏更加快速的运行，比如需要加载游戏运行的各种资源文件，读取游戏配置的各项数据等。游戏主循环部分：读取外部操作：整个游戏的运行离不开玩家和游戏世界的实时交互，甚至来自于游戏世界本身的交互，所以游戏世界中必须监控来自于外部的操作，以随时改变游戏的状态。这些外部操作主要来自外

4、部设备或者网络数据，比如键盘、摇杆、触屏、话筒和方向盘等。更新游戏场景：在获取了游戏外设的操作后，游戏世界必须根据这些改变游戏世界的数据进行更新整个游戏的场景。例如，在超级玛丽中，按下了跳跃按钮，在水果忍者中，用手指果断地画了一个十字斩等，这时候，就必须在游戏循环中根据外部操作更新玛丽的动作，让它跳的更高。事实上，整个更新的过程，并不一定需要等到外来的操作，有可能是来自于内部游戏的其他对象引发的，比如超级玛丽中，玛丽不小心碰到了怪物，也有可能是来自于网络游戏的服务器，在网络游戏中，客户端的游戏世界还需要根据服务器的数据进行更新。事实上，这部分也可以看出游戏的主要逻辑处理部分，一旦满足退出游戏逻

5、辑，那么游戏主循环就结束，结束游戏。显示游戏场景：为了让用户有成就感，让用户有更多的视觉享受，在进行了游戏更新场景的操作之后，需要做的事情就是把游戏中的场景显示出来，不管是战神中的血腥，还是仙剑中的凄美动人爱情，最后都需要通过画面进行渲染出来。结束游戏循环：游戏主循环中，如果满足退出游戏逻辑，则游戏结束。1.3 HTML5基础知识基础知识HTML（第一版），这是一个非正式的工作版本，于1993年6月作为IEIF（Internet Engineering Task Force）草案发布；HTML2.0，1995年11月作为RFC1866（Request For Comment）发布，RFC是由I

6、ETF发布的备忘录；HTML3.2,1997年1月14日，成为W3C（World Wide Web Consortium）推荐标准；HTML4.0,1997年12月18日，W3C推荐标准；HTML4.01,1999年12月24日，W3C推荐标准；Web Application1.0,2004年作为HTML5草案的前身由WHATWG（Web Hypertext Application Technology Working Group，以推动HTML5标准而建立的组织）提出，2007年被W3C组织标准。HTML5草案，2008年1月22日，第一份草案正式发布。HTML5.1,2012年12月17日

7、，W3C的首份规范草案发布。1.3 HTML5基础知识基础知识-1.3.1HTML5概述概述Canvas画布元素，Canvas元素的诞生为HTML5能够支持较高性能的动画和游戏提供了提交。Canvas可以直接使用硬件加速完成像素级别的图像渲染，不仅可以完成2D图形渲染，使用WebGL以及Shader语言还可以完成较高性能的3D图形渲染。多媒体元素，HTML5中提供了专门的audio元素和video元素，用于播放网络音频文件和是视频文件，有了这两个多媒体元素，将不再需要单独安装插件就可以进行影音的播放，减少浏览器的污染程序。地理信息服务，通过HTML5的地理信息服务API可以获取到客户端所在的经

8、度和纬度，利用这些信息可以向这个坐标附近的区域提供服务，可应用于地理交通信息查询、基于LBS（Location Based Services）的社交游戏等。本地存储服务，相对于传统的Cookie微量的本地存储技术，HTML5推出了新的本地存储规范，提供了容量更大，更安全和更易于使用的本地存储方案。WebSocket通信，弥补了传统的Web应用程序缺乏实时通信的功能，使用WebSocket技术可以在Web应用程序中实现类似于传统C/S结构应用程序的通信功能，使得在Web环境中构建实时的通信程序提供了可能。离线存储，HTML5的离线缓存应用的功能，使客户端即使没有连接到互联网络，也可以在客户端正常

9、使用本地功能。有了这个强大的功能，用户可以更加灵活地控制缓存资源的加载，可以在没有网络信号的情况下使用本地应用。多线程，HTML5中提供了真正意义上的多线程解决方案，在HTML4的使用过程中，如果遇到客户端需要在后台执行耗时方法，则页面会处于“假死”状态，而在HTML5中可以使用多线程解决类似问题。设备，为了能够适应多种（PC、手机和平板），HTML5提供了Device元素，可以让应用程序访问诸如摄像头、麦克风等硬件设备。1.3.2 Canvas简介简介在HTML5的王国中，将使用具有魔力的Canvas元素，来在浏览器中做一番奇妙的事情，如图1-2所示的图像查看器，一个交互式的放大镜，一个可以

10、在各种得体的浏览器以及iPad之中的运动效果程序，还有完整的HTML5游戏，以前的这些软件都是在Flash开发领域中实现的。HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。不过，元素本身并没有绘制能力（它仅仅是图形的容器），必须使用脚本来完成实际的绘图任务。getContext()方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。本节概要说明几个重要的 getContext(2d)对象的属性和方法，具体可参照之后几节在画布上绘制文本、线条、矩形、圆形中的使用方法，其他的属性和方法请参照教学资源的参考手册。1.4开发环境配置开发环境配置1.4.1 开发服务器开

11、发服务器用XAMPP（Apache+MySQL+PHP+PERL），它是一个个功能强大的服务器系统开发套件，可以在Windows、Linux、Solaris等操作系统下安装使用，支持多语言（如英语、简体中文、繁体中文、韩文、俄文和日文等）。1.4.2 开发工具开发工具1.Adobe Dreamweaver CS62.IntelliJ IDEA1.4.3 浏览器浏览器HTML5仍处于完善之中，然而，现在大部分浏览器已经开始具备对HTML5的支持了，当然，各大浏览器的开发还在继续，将来应该会全面支持 HTML5的，浏览器厂商的竞争促使各大浏览器对HTML5和CSS3的支持越来越完善，下面的图1-1

12、8列出了 IE、Chrome、Firefox、Safari、Opera 五大主流浏览器对内置Canvas、Audio、Video、SVG 和 WebGL 等重要特性对象的支持情况。H网站主要是针对HTML5兼容性测试，以Chrome为例，其HTML5测试评分如图1-19所示。对HTML5综合性能检测权威网站http:/可以针对浏览器进行全方位的测试，将Chrome浏览器缓存清理完毕之后，关闭计算机系统中所有第三方进程，运行Chrome浏览器，并将Peacekeeper测试地址输入到Chrome地址栏。页面加载完毕之后，看到的界面如上图所示，是Peacekeeper为Chrome浏览器的测试准备

13、页面，点击“GO”测试开始。Peacekeeper在正式测试开始之前，会自动检测所处的浏览器平台，并在页面中呈现浏览器受关注的排列情况。直接点击“浏览器衡量”正式开始测试Chrome浏览器。如图1-20所示，最终所得到的测试结果为1720.，从检测结果来看，目前综合性能最高的也是Chrome浏览器，当然每个浏览器的好坏不是仅凭这个就可以定义的，并且即使浏览器的功能再强大，界面再漂亮，也不一定就是用户心目中最好的浏览器，因为浏览器的使用涉及到一个习惯问题，用习惯了自然就觉得好了，根本不会去考虑它功能是否强大。另外现实生活中使用浏览器，虽然其功能十分强大，十分完善，但是并不是每个人都能完全用到所有

14、功能的。基础知识篇基础知识篇第第2章章Canvas基本功能基本功能2.1.1定义定义Canvas标签标签标签定义图形，比如图表和其他图像，必须使用脚本来绘制图形。如图2-1所示，在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。一个画布在网页中是一个矩形框，通过元素来绘制.【案例【案例2-1】：创建一个画布（】：创建一个画布（Canvas）代码清单2-1您的浏览器不支持 HTML5 canvas 标签。默认情况下元素没有边框和内容，可以使用style属性来添加边框。标签通常需要指定一个id属性(脚本中经常引用)，width和height属性定义的画布的大小。程序运行

15、效果如图2-2所示。2.1.2 理解理解Canvas坐标系坐标系如图2-3所示，Canvas元素的坐标系是一个二维网格，它的坐标系是以左上角为原点，向右延伸是X横坐标的正方向，向下延伸是Y纵坐标正方向，所以原点的坐标是(x,y)=(0,0)，弄清楚坐标系对于以后使用Canvas的API意义重大，在绘图的时候需要时刻记住坐标空间。例如第2.2节的fillRect方法拥有参数(0,0,150,75)，意思是：在画布上绘制150 x75 的矩形，从左上角开始(0,0)。X坐标Y坐标【案例【案例2.2】：使用】：使用 JavaScript 来获取来获取Canvas坐标坐标function cnvs_g

16、etCoordinates(e)x=e.clientX;y=e.clientY;document.getElementById(xycoordinates).innerHTML=Coordinates:(+x+,+y+);function cnvs_clearCoordinates()document.getElementById(xycoordinates).innerHTML=;程序运行效果如图2-4所示。画布的X和Y坐标用于在画布上对绘画进行定位。鼠标移动的矩形框上，显示定位坐标。2.1.3 获取获取Canvas环境上下文环境上下文在定义好Canvas之后，就可以使用Javascript

17、访问Canvas元素，使用Canvas提供的一系列API，在使用Canvas时，首先要得到Canvas的环境上下文，有了Canvas环境上下文，才能够对Canvas进行相应操作，可以通过案例2.1.3-1获取环境上下文：var c=document.getElementById(myCanvas);var ctx=c.getContext(2d);ctx.fillStyle=#FF0000;ctx.fillRect(0,0,150,75);代码解析:canvas 元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成：首先，找到元素：var c=document.getEl

18、ementById(myCanvas);然后，创建 context 对象：var ctx=c.getContext(2d);getContext(2d)对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。下面的两行代码绘制一个红色的矩形：ctx.fillStyle=#FF0000;ctx.fillRect(0,0,150,75);设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。fillRect(x,y,width,height)方法定义了矩形当前的填充方式。程序运行效果如图2-5所示。2.2 Canv

19、as图形图形创建Canvas和获取了Canvas环境上下文之后，就可以开始进行绘图了，绘图的方式有两类：一类是进行图形绘制，另一类是图形的处理。2.2.1绘制绘制Canvas路径路径 所谓基本图形，就是指线、矩形、圆等最简单的图形，任何复杂的图形都是由这些简单的图形组合而成的。本节内容在极客学院中知识目录在“首页职业课程库HTML5HTML5 Canvas 使用路径”下（http:/ c=document.getElementById(myCanvas);var ctx=c.getContext(2d);ctx.moveTo(0,0);ctx.lineTo(200,100);ctx.strok

20、e();代码解析:定义开始坐标(0,0)，和结束坐标(200,100)。然后使用stroke()方法来绘制线条代码运行效果如图2-6所示【案例【案例2-5】：绘制圆形的结束线帽】：绘制圆形的结束线帽var c=document.getElementById(myCanvas);var ctx=c.getContext(2d);ctx.beginPath();ctx.lineWidth=10;ctx.lineCap=butt;ctx.moveTo(20,20);ctx.lineTo(200,20);ctx.stroke();ctx.beginPath();ctx.lineCap=round;ct

21、x.moveTo(20,40);ctx.lineTo(200,40);ctx.stroke();ctx.beginPath();ctx.lineCap=square;ctx.moveTo(20,60);ctx.lineTo(200,60);ctx.stroke();代码解析:lineCap属性设置或返回线条末端线帽的样式。其对应的语法格式如表2-1所示。默认值：默认值：buttJavaScript 语法：语法：context.lineCap=butt|round|square;属性值如表2-2所示。值值描述描述butt默认。向线条的每个末端添加平直的边缘。round向线条的每个末端添加圆形线帽

22、。square向线条的每个末端添加正方形线帽。程序运行效果如图2-7所示。【案例【案例2-6】：使用】：使用moveTo与与lineTo绘制复杂绘制复杂图形图形function draw(id)var canvas=document.getElementById(id);var context=canvas.getContext(2d);context.fillStyle=#eeeeef;/设置绘图区域颜色 context.fillRect(0,0,300,400);/画矩形var dx=150;var dy=150;var s=100;context.beginPath();/开始绘图 co

23、ntext.fillStyle=rgb(100,255,100);/设置绘图区域颜色 context.strokeStyle=rgb(0,0,100);/设置线条颜色var x=Math.sin(0);var y=Math.coas(0);var dig=Math.PI/15*11;for(var i=0;i30;i+)/不断的旋转绘制线条var x=Math.sin(i*dig);var y=Math.cos(i*dig);context.LineTo(dx+x*s,dy+y*s);context.closePath();context.fill();context.stroke();代码解

24、析:本案例利用循环与moveTo与lineTo形成复杂结果，主要是将现将光标移动到指定坐标点，绘制直线的时候以这个坐标点为起点，moveTo(x,y)画图到x、y轴的位置。案例运行效果如图2-8所示【案例【案例2-7】：使用】：使用rect与与stroke绘制绘制 Canvas矩形矩形var c=document.getElementById(myCanvas);var ctx=c.getContext(2d);ctx.rect(20,20,150,100);ctx.stroke();代码解析:本案例主要使用stroke()或fill()方法在画布上实际地绘制矩形。其对应的语法格式如表2-3所

25、示。JavaScript 语法：语法：context.rect(x,y,width,height);参数值如表2-4所示参数参数描述描述x矩形左上角的 x 坐标。y矩形左上角的 y 坐标。width矩形的宽度，以像素计。height矩形的高度，以像素计。程序运行效果如图2-9所示。【案例【案例2-8】：使用】：使用fillRect()绘制绘制 Canvas矩形矩形var c=document.getElementById(myCanvas);var ctx=c.getContext(2d);ctx.fillRect(20,20,150,100);代码解析:本案例使用fillRect()方法绘制

26、已填充的矩形。默认的填充颜色是黑色，对应的语法格式如表2-5所示。提示：提示：可以使用fillStyle属性来设置用于填充绘图的颜色、渐变或模式。JavaScript 语法：语法：context.fillRect(x,y,width,height);参数值如表2-6所示。参数参数描述描述x矩形左上角的 x 坐标。y矩形左上角的 y 坐标。width矩形的宽度，以像素计。height矩形的高度，以像素计。程序运行效果如图2-9所示。JavaScript 语法：语法：context.fillRect(x,y,width,height);参数值如表2-6所示。【案例【案例2-9】：使用】：使用arc

27、()绘制绘制 Canvas圆形圆形var c=document.getElementById(myCanvas);var ctx=c.getContext(2d);ctx.beginPath();ctx.arc(95,50,40,0,2*Math.PI);ctx.stroke();代码解析:arc()方法创建弧/曲线（用于创建圆或部分圆）。如图2-10所示，如需通过arc()来创建圆，请把起始角设置为0，结束角设置为2*Math.PI。使用stroke()或fill()方法在画布上绘制实际的弧，对应的语法格式如表2-7所示，参数如表2-8所示。JavaScript 语法：语法：context.

28、arc(x,y,r,sAngle,eAngle,counterclockwise);参数参数描述描述x圆的中心的 x 坐标。y圆的中心的 y 坐标。r圆的半径。sAngle起始角，以弧度计（弧的圆形的三点钟位置是 0 度）。eAngle结束角，以弧度计。counterclockwise可选。规定应该逆时针还是顺时针绘图。False=顺时针，true=逆时针。本案例运行的结果如图2-11所示。【案例【案例2-10】：使用】：使用arc函数绘制复杂函数绘制复杂 Canvas圆形圆形 function draw(id)var canvas=document.getElementById(id);if

29、(canvas=null)return false;var context=canvas.getContext(2d);context.fillStyle=#eeeeef;context.fillRect(0,0,600,700);for(var i=0;i=10;i+)/循环不断绘制圆形context.beginPath();context.arc(i*25,i*25,i*10,0,Math.PI*2,true);context.closePath();context.fillStyle=rgba(255,0,0,0.25);context.fill();代码解析:本案例主要说明HTML5绘

30、制圆形，主要包含四个步骤，开始创建路径、创建图形的路径、路径创建完成后，关闭路径和设定绘制样式，调用绘制方法，绘制路径，代码的解析请查看源代码注释程序运行如图2-12所示【案例【案例2-11】：】：quadraticCurveTo绘制绘制 Canvas贝塞尔曲线贝塞尔曲线var c=document.getElementById(myCanvas);var ctx=c.getContext(2d);ctx.beginPath();Ctx.moveTo(20,20);Ctx.quadraticCurveTo(20,100,200,20);Ctx.stroke();代码解析:quadraticCu

31、rveTo()方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。如图2-13所示，二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用beginPath()和moveTo()方法来定义开始点，应的语法格式如表2-9所示，参数如表2-10所示开始点：moveTo(20,20)控制点：quadraticCurveTo(20,100,200,20)结束点：quadraticCurveTo(20,100,200,20)。JavaScript 语法：语法：context.quadratic

32、CurveTo(cpx,cpy,x,y);参数参数描述描述cpx贝塞尔控制点的 x 坐标。cpy贝塞尔控制点的 y 坐标。x结束点的 x 坐标。y结束点的 y 坐标。案例运行结果如图2-14所示【案例【案例2-12】：】：bezierCurveTo绘制绘制 Canvas贝塞尔曲线贝塞尔曲线var c=document.getElementById(myCanvas);var ctx=c.getContext(2d);ctx.beginPath();ctx.moveTo(20,20);ctx.bezierCurveTo(20,100,200,100,200,20);ctx.stroke();代码

33、解析:bezierCurveTo()方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。如图2-15所示，三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用beginPath()和moveTo()方法来定义开始点，应的语法格式如表2-11所示，参数如表2-12所示。开始点：moveTo(20,20)控制点1：bezierCurveTo(20,100,200,100,200,20)控制点2：bezierCurveTo(20,100,200,100,200,20)结束点：bezier

34、CurveTo(20,100,200,100,200,20)。提示：请查看quadraticCurveTo()方法。它有一个控制点，而不是两个。JavaScript 语法：语法：context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);参数参数描述描述cp1x第一个贝塞尔控制点的 x 坐标。cp1y第一个贝塞尔控制点的 y 坐标。cp2x第二个贝塞尔控制点的 x 坐标。cp2y第二个贝塞尔控制点的 y 坐标。x结束点的 x 坐标。y结束点的 y 坐标。代码运行结果如图2-16所示。【案例【案例2-13】：绘制复杂】：绘制复杂Canvas贝塞尔曲线贝塞尔曲线

35、function draw(id)var canvas=document.getElementById(id);if(canvas=null)return false;var context=canvas.getContext(2d);context.fillStyle=#eeeeef;context.fillRect(0,0,300,400);var dx=150;var dy=150;var s=100;context.beginPath();context.fillStyle=rgb(100,255,100);var x=Math.sin(0);var y=Math.cos(0);var

36、 dig=Math.PI/15*11;context.moveTo(dx,dy);for(var i=0;i30;i+)var x=Math.sin(i*dig);var y=Math.cos(i*dig);context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);context.closePath();context.fill();context.stroke();代码解析:用循环的方式设置30条不同的贝塞尔曲线代码运行效果如图2-17所示代码运行效果如图2-17所示2.2.2绘制绘制Canvas变形图形

37、变形图形本节内容在极客学院中知识目录在“首页职业课程库HTML5HTML5 绘制渐变图形与绘制变形图形”下（http:/ var c=document.getElementById(myCanvas);var ctx=c.getContext(2d);var grd=ctx.createLinearGradient(0,0,170,0);grd.addColorStop(0,black);grd.addColorStop(0.5,red);grd.addColorStop(1,white);ctx.fillStyle=grd;ctx.fillRect(20,20,150,100);代码解析:本

38、案例定义一个从黑到红再到白的渐变，作为矩形的填充样式。createLinearGradient()方法创建线性的渐变对象。渐变可用于填充矩形、圆形、线条、文本等等。对应的语法格式如表2-13所示，参数如表2-14所示。提示：提示：请使用该对象作为strokeStyle或fillStyle属性的值；请使用addColorStop()方法规定不同的颜色，以及在gradient对象中的何处定位颜色。JavaScript 语语法：法：context.createLinearGradient(x0,y0,x1,y1);参数参数描述描述x0渐变开始点的 x 坐标y0渐变开始点的 y 坐标x1渐变结束点的

39、x 坐标y1渐变结束点的 y 坐标案例运行结果如图2-18所示。【案例【案例2-15】：使用】：使用 createRadialGradient()绘制绘制Canvas渐变效渐变效果果 var c=document.getElementById(myCanvas);var ctx=c.getContext(2d);var grd=ctx.createRadialGradient(75,50,5,90,60,100);grd.addColorStop(0,red);grd.addColorStop(1,white);ctx.fillStyle=grd;ctx.fillRect(10,10,150,

40、100);代码解析:createRadialGradient()方法创建放射状/圆形渐变对象，渐变可用于填充矩形、圆形、线条、文本等等，对应的语法格式如表2-15所示，参数如表2-16所示。提示：提示：请使用该对象作为strokeStyle或fillStyle属性的值，使用addColorStop()方法规定不同的颜色，以及在gradient对象中的何处定位颜色。JavaScript 语法：语法：context.createRadialGradient(x0,y0,r0,x1,y1,r1);参数参数描述描述x0渐变的开始圆的 x 坐标y0渐变的开始圆的 y 坐标r0开始圆的半径x1渐变的结束圆

41、的 x 坐标y1渐变的结束圆的 y 坐标r1结束圆的半径案例运行结果如图2-19所示【案例【案例2-16】：绘制复杂渐变效果】：绘制复杂渐变效果 function draw(id)var canvas=document.getElementById(id);var context=canvas.getContext(2d);var g1=context.createLinearGradient(0,0,0,300);g1.addColorStop(0,rgb(255,255,0);g1.addColorStop(1,rgb(0,255,255);context.fillStyle=g1;/背景

42、矩形的渐变效果 context.fillRect(0,0,500,500);var g2=context.createLinearGradient(0,0,300,0);g2.addColorStop(0,rgba(0,0,255,0.5);g2.addColorStop(1,rgba(255,0,0,0.5);for(var i=1;i10;i+)/使用for循环生成多个渐变图形 context.beginPath();context.fillStyle=g2;context.arc(i*25,i*25,i*10,0,Math.PI*2,true);context.closePath();c

43、ontext.fill();图2-20-A背景效果使用context.fillStyle=g1、圆形渐变效果使用context.fillStyle=g2注释后的案例效果如图2-20-B所示。【案例【案例2-17】：使用单独的函数来绘制渐变效】：使用单独的函数来绘制渐变效果果 function draw(id)var canvas=document.getElementById(id);if(canvas=null)return false;var context=canvas.getContext(2d);var g1=context.createRadialGradient(400,50,5

44、0,400,50,400);g1.addColorStop(0.1,rgb(255,255,0);g1.addColorStop(0.3,rgb(255,0,255);g1.addColorStop(1,rgb(0,255,255);context.fillStyle=g1;context.fillRect(0,0,500,500);案例的运行效果如图2-21所示【案例【案例2-18】：使用】：使用scale()绘制变形图形绘制变形图形 var c=document.getElementById(myCanvas);var ctx=c.getContext(2d);ctx.strokeRect

45、(5,5,25,15);ctx.scale(2,2);ctx.strokeRect(5,5,25,15);代码解析:scale()方法缩放当前绘图至更大或更小，对应的语法格式如表2-17所示，参数如表2-18所示。注意：如果对绘图进行缩放，所有之后的绘图也会被缩放。定位也会被缩放。如果使用scale(2,2)，那么绘图将定位于距离画布左上角两倍远的位置。JavaScript 语法：语法：context.scale(scalewidth,scaleheight);参数参数描述描述scalewidth缩放当前绘图的宽度（1=100%，0.5=50%，2=200%，依次类推）。scaleheight

46、缩放当前绘图的高度（1=100%，0.5=50%，2=200%，依次类推）。案例的运行效果如图2-22所示【案例【案例2-19】：使用】：使用rotate()绘制变形图形绘制变形图形 var c=document.getElementById(myCanvas);var ctx=c.getContext(2d);ctx.rotate(20*Math.PI/180);ctx.fillRect(50,20,100,50);代码解析:rotate()方法旋转当前的绘图，对应的语法格式如表2-19所示，参数如表2-20所示。注意：旋转只会影响到旋转完成后的绘图。JavaScript 语法：语法：con

47、text.rotate(angle);参数参数描述描述angle旋转角度，以弧度计。如需将角度转换为弧度，请使用degrees*Math.PI/180 公式进行计算。实例：如需旋转 5 度，可规定下面的公式：5*Math.PI/180。案例的运行效果如图2-23所示【案例【案例2-20】：使用】：使用translate()绘制变形图形绘制变形图形 var c=document.getElementById(myCanvas);var ctx=c.getContext(2d);ctx.fillRect(10,10,100,50);ctx.translate(70,70);ctx.fillRect

48、(10,10,100,50);代码解析：translate()方法重新映射画布上的(0,0)位置。当在translate()之后调用诸如 fillRect()之类的方法时，值会添加到 x 和 y 坐标值上，对应的语法格式如表2-21所示，参数如表2-22所示。JavaScript 语法：语法：context.translate(x,y);参数参数描述描述x添加到水平坐标（x）上的值。y添加到垂直坐标（y）上的值。案例的运行效果如图2-24所示【案例【案例2-21】：使用】：使用transform()绘制变形图形绘制变形图形 var c=document.getElementById(myCan

49、vas);var ctx=c.getContext(2d);ctx.fillStyle=yellow;ctx.fillRect(0,0,250,100)ctx.transform(1,0.5,-0.5,1,30,10);ctx.fillStyle=red;ctx.fillRect(0,0,250,100);ctx.transform(1,0.5,-0.5,1,30,10);ctx.fillStyle=blue;ctx.fillRect(0,0,250,100);代码解析:画布上的每个对象都拥有一个当前的变换矩阵，transform()方法替换当前的变换矩阵。它以下面描述的矩阵来操作当前的变换矩

50、阵：acebdf001JavaScript 语法：语法：context.transform(a,b,c,d,e,f);参数参数描述描述a水平缩放绘图。b水平倾斜绘图。c垂直倾斜绘图。d垂直缩放绘图。e水平移动绘图。f垂直移动绘图。案例的运行效果如图2-25所示【案例【案例2-22】：绘制复杂变形图形】：绘制复杂变形图形 function draw(id)var canvas=document.getElementById(id);if(canvas=null)return false;var context=canvas.getContext(2d);context.fillStyle=#ee