第05章__HTML5的图像及动画

1、第5章 HTML5的图像及动画 5.1 canvas元素 5.3 图形操作 5.2 使用路径画图 5.4 图像操作 5.5 其他操作 5.1 canvas元素 canvas元素是HTML5中新增的一个用于绘图的重要元素，在页面中增加一个canvas元素就相当于在网页中添加一块画布，之后就可以利用一系列的绘图指令，在“画布”上绘制图形。cavans元素应用方式如下 5.2 使用路径画图1. canvas坐标系canvas元素构建的画布，是一个基于二维（x，y）的网格。坐标原点（0，0）位于canvas的左上角。从原点延x轴从左到右，取值依次递增；从原点延y轴从上到下，取值依次递增。2. 使用mo

2、veTo、lineTo画线moveTo方法的应用格式为moveTo(x,y)该方法的作用是将光标移动至指定坐标，该坐标作为绘制图形的起点坐标。其中，参数x代表起点的横坐标，参数y代表起点的纵坐标。lineTo方法的应用格式为lineTo(x,y)该方法与moveTo方法结合使用，用于指定一个坐标作为绘制图形的终点坐标。其中，参数x代表重点的横坐标，参数y代表重点的纵坐标。如果多次调用lineTo方法，则可以定义多个中间点坐标作为线条轨迹。最终将绘制形成一条由起点开始，经过各个中间点的线条。该线条可能为直线也可能为折线，取决于lineTo所指定的中间点坐标。3. 使用arc方法画弧arc方法用于

3、绘制弧形、圆形，该方法的应用格式为arc(x,y,radius,startAngle,endAngle,anticlockwise)该方法的各个参数说明如下：（1）x：表示绘制弧形曲线圆心的横坐标。（2）y：表示绘制弧形曲线圆心的纵坐标。（3）radius：表示绘制弧形曲线的半径，单位为像素。（4）startAngle：表示绘制弧形曲线的起始弧度。（5）endAngle：表示绘制弧形曲线的结束弧度。（6）anticlockwise：表示绘制弧形曲线的方向，该参数为布尔型。当赋值为true时，将按照逆时针方向绘制弧形；当赋值为false时，将按照顺时针方向绘制弧形。4. 绘制贝塞尔图形使用bez

4、ierCurveTo方法可以绘制三次贝塞尔曲线，使用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.clearR

5、ect(70,70,110,90); /清除指定区域像素2. 渐变图形实现渐变主要有两种方法，线性渐变和径向渐变。（1）线性渐变HTML5中通过createLinearGradient方法创建LinearGradient对象实现线性渐变。createLinearGradient方法的应用格式如下createLinearGradient(xStart,yStart,xEnd,yEnd); 各个参数说明如下（1）xStart：渐变起始点的横坐标（2）yStart：渐变起始点的纵坐标（3）xEnd：渐变终止点的横坐标（4）yEnd：简便终止点的纵坐标当调用该方法时，将创建一个使用起点坐标及终点坐标的

6、LinearGradient对象，为该对象设置渐变颜色及渐变度的方法应用格式如下addColorStop(offset,color);各个参数说明如下（1）offset：颜色从离开渐变起始点开始变化的偏移量（2）color：渐变使用的颜色（2）径向渐变HTML5提供了createRadialGradient方法用于实现径向渐变，该方法的应用格式为createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd); 各个参数说明如下（1）xStart：渐变开始圆的圆心横坐标（2）yStart：渐变开始圆的圆心纵坐标（3）radi

7、usStart：渐变开始圆的半径（4）xEnd：渐变结束圆的圆心横坐标（5）yEnd：渐变结束圆的圆心纵坐标（6）radiusEnd：渐变结束圆的半径径向渐变也通过addColorStop方法为渐变设置颜色偏移量及使用颜色。3. 坐标变换通过对默认的坐标系进行坐标变换处理，可以实现图形旋转、移位等效果。在HTML5中坐标变换主要有三种方式（1）坐标平移 将默认坐标系原点，延x轴方向或y轴方向移动指定单位长度。translate方法用于设置坐标平移，该方法应用格式为translate(x,y);其中参数x为延x轴方向位移像素数，参数y为延y轴方向位移像素数。（2）坐标放大将图像延x轴方向或y轴方

8、向放大的倍数，scale方法用于设置坐标放大，该方法应用格式为scale(x,y);其中参数x为延x轴方向放大倍数，y为沿y轴方向放大倍数。（3）坐标旋转以原点为中心，将图形旋转指定的角度，rotate方法用于设置坐标旋转，该方法应用格式为rotate(angle);其中参数angle为旋转弧度，当angle为正值时图形以顺时针方向旋转；当angle为负值时，图形以逆时针方向旋转。4. 图形组合处理如果要自定义多个图形重叠部分的组合方式，可以通过修改画布上下文对象的globalCompositeOperation属性来实现。该属性可设置属性值定义如下表所示5. 图形阴影HTML5可以设置画布上

9、下文对象的属性，为图形添加阴影效果。相关属性及说明如下表所示5.4 图像操作1. 画图像使用drawImage()方法，可将页面中已经存在的元素，元素或通过Javascript创建的Image对象绘制在画布中。drawImage方法共有三种应用格式（1）drawImage(image,dx,dy)，直接绘制图像（2）drawImage(image,dx,dy,dw,dh)，绘制缩放图像（3）drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)，绘制切割图像2. 图像平铺图像平铺指用按一定比例缩小的图像填满画布。HTML5中通过调用画布上下文对象的createPatt

10、ern方法实现图像平铺，该方法应用格式为createPattern(image,type)参数image为被平铺的图像对象，type表示图像平铺方式。type参数可取值类型及说明如下表所示3. 图像剪裁HTML5中通过调用画布上下文对象的clip()方法实现图像剪裁。该方法不需提供参数，但是在调用前需使用路径方式在画布中绘制剪裁区域。4. 像素处理在加载图像时调用画布上下文对象的getImageData()方法来获取图像中的像素，调用putImageData()方法将处理后的像素重新绘制在画布中，从而实现对像素的处理。（1）getImageData()方法用于获取指定区域内的像素，应用格式为g

11、etImageData(sx,sy,sw,sh);参数说明如下1. 绘制文字绘制文字功能通过画布上下文对象的fillText()方法以及strokeText()方法实现。（1）fillText()以填充的方式绘制文字，应用格式如下fillText(content,dx,dy,maxLength)参数说明如下 content：文字内容信息 dx：绘制文字开始点的横坐标 dy：绘制文字开始点的纵坐标 maxLength：可选参数，表示绘制文字的最大长度5.5 Canvas其他操作sx：选取图像区域起点横坐标sy：选取图像区域起点纵坐标sw：选取图像区域的宽度sh：选取图像区域的高度（2）putIm

12、ageData()方法用于将处理后的像素重新绘制在指定区域内，应用格式为putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirtyW,dirtyH);参数说明如下imagedata：通过getImageData方法获取的像素集合对象dx：重新绘制图像起点的横坐标dy：重新绘制图像起点的纵坐标dirtyX，dirtyY，dirtyW，dirtyH：这四个参数为可选参数，对应了一个矩形区域的起点横坐标、纵坐标、宽度和高度。（2）strokeText()以描边的方式绘制文字，应用格式如下strokeText(content,dx,dy,maxWidth)参数含义与fillText()方法相同2. 保存、恢复图形HTML5中save()方法用于保存已绘制的图形，restore()方法用于还原保存的图形。这两个方法不需任何参数，直接使用画布上下文对象进行调用即可。5.6 制作动画HTML5中通过绘制图形、清除图形、再绘制图形、再清除图形的方式，可以实现简单的