HTML5 Canvas核心技术—图形、动画与游戏开发.pdf8

第6章 精灵

精灵(sprite),它是一种可以集成入动画之中的图像对象,赋予它们各种行为,精灵并非Canvas API的一部分,,但都是从它衍生而来

本章将会实现三种设计模式:策略模式(精灵与绘制器解耦)、命令模式(精灵的动作)、享元模式(一个实例表示多个精灵)

painter属性是一个指向Painter对象的引用,使用paint(sprite,context)方法来绘制精灵,behaviors属性指向一个对象数组,数组中每个对象都会以execute(sprite,context,time)方法对精灵进行某种形式的操作。

精灵对象有两个方法paint()与update(),update()方法执行精灵的行为,执行的顺序为被加入的顺序,paint()方法则将精灵的绘制代理给绘制器来做

所有Painter对象都可以被归纳为以下三类:描边及填充绘制器、图像绘制器、精灵表绘制器

精灵对象不需要自己完成绘制,它会将绘制操作代理给另外一个对象来做。本质上讲Painter对象就是一些可以互相交换着使用的绘制算法

一张图片里包含动画的每一帧图片,就叫做精灵表(sprite sheet),复制一张图片比复制多张图片速度要快的多

第7章 物理效果

模拟重力加速度9.81m/s²转换为像素/米

抛物体垂直速度

钟摆运动

时间轴扭曲就是那些与时间呈非线性变化的属性(位置、颜色等)

第8章 碰撞检测

分离轴定理,也叫超平面分离定理,SAT

外接图形判别法:在二维平面中执行碰撞检测时,通常会根据物体外接图形的面积来判定(三维空间则按照体积)

外接矩形判别法:外接矩形经常被当作物体的轮廓来参与碰撞检测

事前碰撞检测,可以提前探知是否发生碰撞,由于这是根据当前帧速率来估算,如果帧速率变化,就会出错

外接圆判别法:两个圆心的距离小于两圆的半径只和

事后碰撞检测法,在碰撞发生后在做判断(是否已经发生了碰撞)

光线投射法,根据两条线相交的部分判定

以上方法并不适用任意多边形之间的碰撞检测,分离轴定理(SAT)与最小平移向量(MTV),分离轴定理只适用于凸多边形(所有内角小于180°)

分离轴定理(SAT)相当于将物体的阴影投到一面墙上,阴影重叠则碰撞,阴影部分数学上叫投影,墙叫做轴

只要在任意一条轴上找到互相分离的投影,就可以立即结束检测过程,判定未发生碰撞

投影轴

p1指向p2的向量叫做边缘向量,还需要一条垂直于边缘向量的法向量,叫做边缘法向量

圆形与多边形的碰撞检测,圆形可以近似看成一个有无数条边的正多边形

最小平移向量,指的是不再与另一个物体相撞所需要的最小距离

碰到后弹开

--------------------代码部分后期处理--------------------

本书完

HTML5 Canvas核心技术—图形、动画与游戏开发.pdf8,布布扣,bubuko.com

时间: 2024-12-13 09:15:27

HTML5 Canvas核心技术—图形、动画与游戏开发.pdf8的相关文章

HTML5 Canvas核心技术图形动画与游戏开发(读书笔记)----第一章,基础知识

一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas" width="600" height="300">您的浏览器不支持canvas,可以选择升级您的浏览器</canvas> 2 开发基于canvas的应用程序的最基本的几个操作 1),使用document.getElementById()方

HTML5 Canvas核心技术—图形、动画与游戏开发.pdf5

文本的定位 水平与垂直定位:当使用strokeText()和fillText()绘制文本时,指定了所绘文本的X与Y坐标,还有textAlign与textBaseline两个属性 textAlign:start(默认) center end left right,当canvas元素的dir属性是ltr时,left效果与start相同,right与end相同,如果dir属性是rtl,则相反 textBaseline:top bottom middle alphabetic(默认,基于拉丁字母) id

HTML5 Canvas核心技术—图形、动画与游戏开发.pdf4

CanvasRenderingContext2D对象中用于平移.旋转坐标系的方法 镜像 scale(1,-1)绘制垂直镜像:scale(-1,1)绘制水平镜像 自定义的坐标变换 transform(),多次调用会叠加效果 setTransform(),每次调用都会清除上次的效果 两个方法都用于旋转.缩放.及平移坐标系(可以根据公式传入0或其他数据) x'=ax+cy+e y'=bx+dy+f 坐标系旋转公式(angle弧度) x'=x×cos(angle)-(y×sin(angle)) y'=y

HTML5 Canvas核心技术—图形、动画与游戏开发.pdf1

canvas元素可以说是HTML5元素中功能最强大的一个,它真正的能力是通过Canvas的context对象(绘图上下文)表现出来的 fillText()方法使用fillStyle属性来填充文本中的字符,strokeText()方法使用strokeStyle属性描绘字符的轮廓线,fillStyle属性和strokeStyle属性可以是CSS格式的颜色.渐变色或是图片 fillText()与strokeText()方法都需要3个参数:要绘制的文本内容,以及在canvas中显示文本的横.纵坐标 注意

HTML5 Canvas核心技术—图形、动画与游戏开发.pdf7

性能 运行putImageData()比drawImage()慢,同等条件下优先考虑drawImage() 操作图像数据需要遍历大量数据,应该注意几点: 1)避免在循环体中直接访问对象属性,应当保存在局部变量中 2)应该用循环计数器遍历完整的像素,而非像素分量(每4个一组) 3)逆向遍历与移位技巧效果并不好 4)不要频繁使用getImagedata() 视频处理 var video=document.getElementById('video'); //A <video>element ...

HTML5 Canvas核心技术—图形、动画与游戏开发.pdf3

路径与子路径 在某一时刻,canvas之中只能有一条路径存在,Canvas规范称之为“当前路径”(current path),这条路径却可以包含很多子路径(subpath),子路径是由两个或者更多点组成的 context.beginPath(); context.rect(10,10,100,100); context.stroke(); context.beginPath(); //清除上次调用rect()方法所创建的路径 context.rect(50,50,100,100); contex

HTML5 Canvas核心技术—图形、动画与游戏开发.pdf6

操作图像的像素:getImageData() putImageData() ImageData对象 调用getImageData()方法实际是获取了一个指向ImageData对象的引用,返回的对象包含3个属性:1)width以设备像素为单位的图像数据宽度 2)height以设备像素为单位的图像数据高度 3)data包含各个设备像素数值的数组 width和height都是只读的无符号长整数,data属性包含的每个数组元素都表示图像数据中相应的像素值,每个值包含的颜色分量都是含有8个二进制位的整数(

HTML5 Canvas核心技术—图形、动画与游戏开发.pdf2

事件处理: HTML5应用程序是以事件来驱动的,可以在canvas中增加一个事件监听器,当事件发生时,浏览器就会调用这个监听器 //方法一canvas.onmousedown=function(e){ //一些代码}; //方法二canvas.addEventListener('mousedown',function(e){ //一些代码}) 基础的数学知识简介: 代数方程:(10x+5)x2=110 三角函数:180°等于π弧度 正弦.余弦.正切: sin(α)对边/斜边 cos(α)邻边/斜

HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版?

HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程序直接切入这套API,全面讲解其功能,以求让读者实现出内容丰富且界面一致的网络应用程序,并将开发好的程序部署在多种设备及操作系统之上. 教程地址:HTML5 Canvas核心技术:图形.动画与游戏开发 PDF扫描版? HTML5 Canvas核心技术:图形.动画与游戏开发 目录: 前言 第1章 基础知识 1.