首页 > 代码库 > HTML5 Canvas核心技术—图形、动画与游戏开发.pdf2

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

事件处理:

HTML5应用程序是以事件来驱动的,可以在canvas中增加一个事件监听器,当事件发生时,浏览器就会调用这个监听器

//方法一
canvas.onmousedown=function(e){
//一些代码
};

//方法二
canvas.addEventListener(‘mousedown‘,function(e){
//一些代码
})

基础的数学知识简介:

代数方程:(10x+5)x2=110

三角函数:180°等于π弧度

正弦、余弦、正切:

sin(α)对边/斜边

cos(α)邻边/斜边

tan(α)对边/邻边

向量运算:大小和方向

勾股定理,任何直角三角形的斜边,等于另外两边平方和的平方根

长度为一个单位(即模为1)的向量,叫做单位向量

向量的加减

向量的点积(用以判断物体碰撞后移动方向)

 一帧就是一副静止的画面,连续的帧就形成动画

第二章 绘制

坐标系统:默认情况下,Canvas的坐标以canvas左上角为原点,X坐标向右增长,Y坐标向下延伸

矩形的绘制:Canvas的API提供了三个方法,分别用于矩形的清除、描边和填充

clearRect(double x,double y,double w,double h)(左上角x,y坐标,矩形的宽度和高度)

strokeRect(double x,double y,double w,double h)

fillRect(double x,double y,double w,double h)

颜色与透明度:

可以通过绘图环境的strokeStyle与fillStyle属性来设置

context.strokeStyle=‘red‘;

context.fillStyle=‘rgba(0,0,255,0.5)‘;

HSL格式的颜色相对于RBG来说更直观,RGB以硬件为导向(阴极射线管),HSL三个分量分别是色相、饱和度、亮度

渐变色与图案:

除了颜色值以外,strokeStyle与fillStyle也支持渐变色与图案

linear(线性渐变)与radial(放射渐变)

createLinearGradient()方法来创建线性渐变,需要向该方法传入两个点的x、y坐标(共4个),两点之间的连线就是canvas建立颜色渐变效果的依据,调用createLinearGradient()方法后返回一个CanvasGradient实例,将该实例作为fillStyle的值

context.fillStyle=gradient;

CanvasGradient有一个唯一的方法addColorStop(),向渐变色中增加5个“颜色停止点”,接收两个参数,一个是0~1.0之间的double值,代表颜色停止点在渐变线上的位置,另一个是DOMString类型的CSS3颜色字串值(颜色单词)

createRadialGradient()方法实现放射渐变,比createLinearGradient()多两个半径参数

图案:

Canvas元素也允许使用图案对图形和文本进行描边与填充,图案可以是image元素、canvas元素或video元素

createPattern()方法来创建图案,接收两个参数:图案本身、一个表示重复方式的字符串(repeat、repeat-x、repeat-y、no-repeat)

阴影:

不管是画的是图像还是文本,都可以通过修改绘图环境中的属性值来指定阴影效果

shadowColor:CSS3格式的颜色(设置为undefined会禁用阴影)

shadowOffsetX:从图形或文本到阴影的水平偏移(设为负值则是向左)

shadowOffsetY:从图形或文本到阴影的垂直偏移(设为负值则是向上)

shadowBlur:表示高斯模糊的数值(整数)

路径、描边与填充:

封闭路径(closed path)

开发路径(open path)