HTML5游戏开发案例教程（陈惠红 石坤泉）PPT全套完整教学课件.pptx

HTML5游戏开发案例教程（陈惠红石坤泉）;开发准备篇;引入语：;1.1网页游戏概述;1.2游戏开发流程;1.3HTML5基础知识;1.3HTML5基础知识-1.3.1HTML5概述;1.3.2Canvas简介;1.4开发环境配置;1.4.2开发工具

;1.4.3浏览器

;H网站主要是针对HTML5兼容性测试，以Chrome为例，其HTML5测试评分如图1-19所示。

对HTML5综合性能检测权威网站可以针对浏览器进行全方位的测试，将Chrome浏览器缓存清理完毕之后，关闭计算机系统中所有第三方进程，运行Chrome浏览器，并将Peacekeeper测试地址输入到Chrome地址栏。页面加载完毕之后，看到的界面如上图所示，是Peacekeeper为Chrome浏览器的测试准备页面，点击“GO”测试开始。Peacekeeper在正式测试开始之前，会自动检测所处的浏览器平台，并在页面中呈现浏览器受关注的排列情况。直接点击“浏览器衡量”正式开始测试Chrome浏览器。

如图1-20所示，最终所得到的测试结果为1720.，从检测结果来看，目前综合性能最高的也是Chrome浏览器，当然每个浏览器的好坏不是仅凭这个就可以定义的，并且即使浏览器的功能再强大，界面再漂亮，也不一定就是用户心目中最好的浏览器，因为浏览器的使用涉及到一个习惯问题，用习惯了自然就觉得好了，根本不会去考虑它功能是否强大。另外现实生活中使用浏览器，虽然其功能十分强大，十分完善，但是并不是每个人都能完全用到所有功能的。

;基础知识篇;引入：;2.1Canvas标签

;2.1.1定义Canvas标签;【案例2-1】：创建一个画布（Canvas）

;2.1.2理解Canvas坐标系

;【案例2.2】：使用JavaScript来获取Canvas坐标;2.1.3获取Canvas环境上下文

;2.2Canvas图形

;绘制线条

;【案例2-5】：绘制圆形的结束线帽

;【案例2-6】：使用moveTo与lineTo绘制复杂图形

;【案例2-7】：使用rect与stroke绘制Canvas矩形

;【案例2-8】：使用fillRect()绘制Canvas矩形;【案例2-9】：使用arc()绘制Canvas圆形

;【案例2-10】：使用arc函数绘制复杂Canvas圆形

;【案例2-11】：quadraticCurveTo绘制Canvas贝塞尔曲线

;【案例2-12】：bezierCurveTo绘制Canvas贝塞尔曲线;【案例2-13】：绘制复杂Canvas贝塞尔曲线

;2.2.2绘制Canvas变形图形

;【案例2-14】：使用createLinearGradient()绘制渐变效果

;【案例2-15】：使用createRadialGradient()绘制Canvas渐变效果

;【案例2-16】：绘制复杂渐变效果

;【案例2-17】：使用单独的函数来绘制渐变效果

;【案例2-18】：使用scale()绘制变形图形

;【案例2-19】：使用rotate()绘制变形图形

;【案例2-20】：使用translate()绘制变形图形

;【案例2-21】：使用transform()绘制变形图形

;【案例2-22】：绘制复杂变形图形

;2.2.3处理Canvas图形

【案例2-23】：使用globalCompositeOperation参数对图形进行处理

;【案例2-24】：使用shadowColor参数对图形进行处理

;【案例2-25】：用单独函数绘制五角星阴影

;【案例2-26】：使用fillText()函数绘制文字

;【案例2-27】：使用strokeText()函数绘制文字

;【案例2-28】：文字大小设置

;【案例2-29】：文字字体设置

;【案例2-30】：文字粗体设置;【案例2-31】：文字斜体设置

;【案例2-32】：文字对齐方式设置

;【案例2-33】：文本基线设置

;2.4Canvas图片

;【案例2-34】：使用drawImage()函数在画布上绘制图片

;【案例2-35】：利用getImageData和putImageData绘制图片

;【案例2-36】：使用createImageData()函数在画布上绘制图片

;;基础知识篇;引入：;3.1.1下载CreateJS

;3.1.2介绍CreateJS

;3.1.3对比CreateJS与Canvas

;【案例3-1】：使用Canvas实现蝴蝶移动效果

;【案例3-2】：使用EaselJS实现蝴蝶移动效果

;【案例3-3】：使用EaselJS实现更多蝴蝶移动效果

;3.2CreateJS包简介

;【案例3-4】：使用EaselJS包实现舞台编写文字效果

;【案例3-5】：使用T