事件处理:
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)
HTML5 Canvas核心技术—图形、动画与游戏开发.pdf2