第05章__HTML5的图像及动画.ppt

第5章 HTML5的图像及动画 ;5.1 canvas元素;5.2 使用路径画图;2. 使用moveTo、lineTo画线 moveTo方法的应用格式为 　　 moveTo(x,y) 该方法的作用是将光标移动至指定坐标，该坐标作为绘制图形的起点坐标。其中，参数x代表起点的横坐标，参数y代表起点的纵坐标。 lineTo方法的应用格式为 lineTo(x,y) 该方法与moveTo方法结合使用，用于指定一个坐标作为绘制图形的终点坐标。其中，参数x代表重点的横坐标，参数y代表重点的纵坐标。如果多次调用lineTo方法，则可以定义多个中间点坐标作为线条轨迹。最终将绘制形成一条由起点开始，经过各个中间点的线条。该线条可能为直线也可能为折线，取决于lineTo所指定的中间点坐标。 3. 使用arc方法画弧; arc方法用于绘制弧形、圆形，该方法的应用格式为 arc(x,y,radius,startAngle,endAngle,anticlockwise) 该方法的各个参数说明如下： （1）x：表示绘制弧形曲线圆心的横坐标。 （2）y：表示绘制弧形曲线圆心的纵坐标。 （3）radius：表示绘制弧形曲线的半径，单位为像素。 （4）startAngle：表示绘制弧形曲线的起始弧度。 （5）endAngle：表示绘制弧形曲线的结束弧度。 （6）anticlockwise：表示绘制弧形曲线的方向，该参数为布尔型。当赋值为true时，将按照逆时针方向绘制弧形；当赋值为false时，将按照顺时针方向绘制弧形。 4. 绘制贝塞尔图形 使用bezierCurveTo方法可以绘制三次贝塞尔曲线，使用quadraticCurveTo方法绘制二次贝塞尔曲线。;5.3 图形操作; createLinearGradient方法的应用格式如下 createLinearGradient(xStart,yStart,xEnd,yEnd); 各个参数说明如下 （1）xStart：渐变起始点的横坐标 （2）yStart：渐变起始点的纵坐标 （3）xEnd：渐变终止点的横坐标 （4）yEnd：简便终止点的纵坐标 当调用该方法时，将创建一个使用起点坐标及终点坐标的LinearGradient对象，为该对象设置渐变颜色及渐变度的方法应用格式如下 addColorStop(offset,color); 　各个参数说明如下 （1）offset：颜色从离开渐变起始点开始变化的偏移量 （2）color：渐变使用的颜色;（2）径向渐变 HTML5提供了createRadialGradient方法用于实现径向渐变，该方法的应用格式为 　　createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd); 各个参数说明如下 （1）xStart：渐变开始圆的圆心横坐标 （2）yStart：渐变开始圆的圆心纵坐标 （3）radiusStart：渐变开始圆的半径 （4）xEnd：渐变结束圆的圆心横坐标 （5）yEnd：渐变结束圆的圆心纵坐标 （6）radiusEnd：渐变结束圆的半径 径向渐变也通过addColorStop方法为渐变设置颜色偏移量及使用颜色。;3. 坐标变换 通过对默认的坐标系进行坐标变换处理，可以实现图形旋转、移位等效果。在HTML5中坐标变换主要有三种方式 （1）坐标平移 　 将默认坐标系原点，延x轴方向或y轴方向移动指定单位长度。translate方法用于设置坐标平移，该方法应用格式为 translate(x,y); 其中参数x为延x轴方向位移像素数，参数y为延y轴方向位移像素数。 （2）坐标放大 将图像延x轴方向或y轴方向放大的倍数，scale方法用于设置坐标放大，该方法应用格式为 scale(x,y); 其中参数x为延x轴方向放大倍数，y为沿y轴方向放大倍数。;（3）坐标旋转 以原点为中心，将图形旋转指定的角度，rotate方法用于设置坐标旋转，该方法应用格式为 rotate(angle); 其中参数angle为旋转弧度，当angle为正值时图形以顺时针方向旋转；当angle为负值时，图形以逆时针方向旋转。 4. 图形组合处理 如果要自定义多个图形重叠部分的组合方式，可以通过修改画布上下文对象的globalCompositeOperation属性来实现。该属性可设置属性值定义如下表所示;;5. 图形阴影 HTML5可以设置画布上下文对象的属性，为图形添加阴影效果。相关属性及说明如下表所示;5.4 图像操作;;1. 绘制文字 绘制文字功能通过画布上下文对象的fillText()方法以及strokeText()方法实现。 （1）fi