第5讲HTML5的图像及动画.ppt

第5章 HTML5的图像及动画 5.1 canvas元素 5.3 图形操作 5.2 使用路径画图 5.4 图像操作 5.5 其他操作 5.1 canvas元素 canvas元素是HTML5中新增的一个用于绘图的重要元素，在页面中增加一个canvas元素就相当于在网页中添加一块画布，之后就可以利用一系列的绘图指令，在“画布”上绘制图形。 cavans元素应用方式如下 !DOCTYPE html html meta charset=gb2312 / canvas width=200px height=200px style=background-color:red /canvas /html 例1 5.2 使用路径画图 1. canvas坐标系 canvas元素构建的画布，是一个基于二维（x，y）的网格。坐标原点（0，0）位于canvas的左上角。从原点延x轴从左到右，取值依次递增；从原点延y轴从上到下，取值依次递增。 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 图形操作 1. 图形样式设置 HTML5通过两个步骤来实现图形样式添加：定义样式，调用指定方法使图形应用样式。例如下面代码，将绘制一个红色边框矩形。 var canvas = document.getElementById(myCanvas); var context = canvas.getContext(2d); context.strokeStyle= red; context.strokeRect(50,50,150,130); //绘制矩形并在边缘填充红色 context.clearRect(70,70,110,90); //清除指定区域像素 2. 渐变图形 实现渐变主要有两种方法，线性渐变和径向渐变。 （1）线性渐变 HTML5中通过createLinearGradient方法创建LinearGradient对象实现线性渐变。 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