第5讲HTML5的图像及动画

1、第第5章章 HTML5的图像及动画的图像及动画 5.1 canvas元素 5.3 图形操作 5.2 使用路径画图 5.4 图像操作 5.5 其他操作 5.1 canvas元素元素 canvas元素是元素是HTML5中新增的一个用于绘图的重要元中新增的一个用于绘图的重要元素，在页面中增加一个素，在页面中增加一个canvas元素就相当于在网页中元素就相当于在网页中添加一块画布，之后就可以利用一系列的绘图指令，在添加一块画布，之后就可以利用一系列的绘图指令，在“画布画布”上绘制图形。上绘制图形。cavans元素应用方式如下元素应用方式如下 例例15.2 使用路径画图使用路径画图1. canvas坐标

2、系坐标系canvas元素构建的画布，是一个基于二维（元素构建的画布，是一个基于二维（x，y）的网格。坐标原）的网格。坐标原点（点（0，0）位于）位于canvas的左上角。从原点延的左上角。从原点延x轴从左到右，取值依次轴从左到右，取值依次递增；从原点延递增；从原点延y轴从上到下，取值依次递增。轴从上到下，取值依次递增。2. 使用使用moveTo、lineTo画线画线moveTo方法的应用格式为方法的应用格式为moveTo(x,y)该方法的作用是将光标移动至指定坐标，该坐标作为绘制图形的起点该方法的作用是将光标移动至指定坐标，该坐标作为绘制图形的起点坐标。其中，参数坐标。其中，参数x代表起点的横

3、坐标，参数代表起点的横坐标，参数y代表起点的纵坐标。代表起点的纵坐标。lineTo方法的应用格式为方法的应用格式为lineTo(x,y)该方法与该方法与moveTo方法结合使用，用于指定一个坐标作为绘制图形的方法结合使用，用于指定一个坐标作为绘制图形的终点坐标。其中，参数终点坐标。其中，参数x代表重点的横坐标，参数代表重点的横坐标，参数y代表重点的纵坐标代表重点的纵坐标。如果多次调用。如果多次调用lineTo方法，则可以定义多个中间点坐标作为线条轨方法，则可以定义多个中间点坐标作为线条轨迹。最终将绘制形成一条由起点开始，经过各个中间点的线条。该线迹。最终将绘制形成一条由起点开始，经过各个中间点

4、的线条。该线条可能为直线也可能为折线，取决于条可能为直线也可能为折线，取决于lineTo所指定的中间点坐标。所指定的中间点坐标。3. 使用使用arc方法画弧方法画弧arc方法用于绘制弧形、圆形，该方法的应用格式为方法用于绘制弧形、圆形，该方法的应用格式为arc(x,y,radius,startAngle,endAngle,anticlockwise)该方法的各个参数说明如下：该方法的各个参数说明如下：（1）x：表示绘制弧形曲线圆心的横坐标。：表示绘制弧形曲线圆心的横坐标。（2）y：表示绘制弧形曲线圆心的纵坐标。：表示绘制弧形曲线圆心的纵坐标。（3）radius：表示绘制弧形曲线的半径，单位为像

5、素。：表示绘制弧形曲线的半径，单位为像素。（4）startAngle：表示绘制弧形曲线的起始弧度。：表示绘制弧形曲线的起始弧度。（5）endAngle：表示绘制弧形曲线的结束弧度。：表示绘制弧形曲线的结束弧度。（6）anticlockwise：表示绘制弧形曲线的方向，该参数为布尔型：表示绘制弧形曲线的方向，该参数为布尔型。当赋值为。当赋值为true时，将按照逆时针方向绘制弧形；当赋值为时，将按照逆时针方向绘制弧形；当赋值为false时，将按照顺时针方向绘制弧形。时，将按照顺时针方向绘制弧形。4. 绘制贝塞尔图形绘制贝塞尔图形使用使用bezierCurveTo方法可以绘制三次贝塞尔曲线，使用方法

6、可以绘制三次贝塞尔曲线，使用quadraticCurveTo方法绘制二次贝塞尔曲线。方法绘制二次贝塞尔曲线。5.3 图形操作图形操作1. 图形样式设置图形样式设置HTML5通过两个步骤来实现图形样式添加：定义样式，调用指定方通过两个步骤来实现图形样式添加：定义样式，调用指定方法使图形应用样式。例如下面代码，将绘制一个红色边框矩形。法使图形应用样式。例如下面代码，将绘制一个红色边框矩形。var canvas = document.getElementById(myCanvas);var context = canvas.getContext(2d);context.strokeStyle= re

7、d;context.strokeRect(50,50,150,130); /绘制矩形并在边缘填充红色绘制矩形并在边缘填充红色context.clearRect(70,70,110,90); /清除指定区域像素清除指定区域像素2. 渐变图形渐变图形实现渐变主要有两种方法，线性渐变和径向渐变。实现渐变主要有两种方法，线性渐变和径向渐变。（1）线性渐变）线性渐变HTML5中通过中通过createLinearGradient方法创建方法创建LinearGradient对象对象实现线性渐变。实现线性渐变。createLinearGradient方法的应用格式如下方法的应用格式如下createLinear

8、Gradient(xStart,yStart,xEnd,yEnd); 各个参数说明如下各个参数说明如下（1）xStart：渐变起始点的横坐标：渐变起始点的横坐标（2）yStart：渐变起始点的纵坐标：渐变起始点的纵坐标（3）xEnd：渐变终止点的横坐标：渐变终止点的横坐标（4）yEnd：简便终止点的纵坐标：简便终止点的纵坐标当调用该方法时，将创建一个使用起点坐标及终点坐标的当调用该方法时，将创建一个使用起点坐标及终点坐标的LinearGradient对象，为该对象设置渐变颜色及渐变度的方法应用格对象，为该对象设置渐变颜色及渐变度的方法应用格式如下式如下addColorStop(offset,c

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

10、art：渐变开始圆的圆心纵坐标：渐变开始圆的圆心纵坐标（3）radiusStart：渐变开始圆的半径：渐变开始圆的半径（4）xEnd：渐变结束圆的圆心横坐标：渐变结束圆的圆心横坐标（5）yEnd：渐变结束圆的圆心纵坐标：渐变结束圆的圆心纵坐标（6）radiusEnd：渐变结束圆的半径：渐变结束圆的半径径向渐变也通过径向渐变也通过addColorStop方法为渐变设置颜色偏移量及使用颜方法为渐变设置颜色偏移量及使用颜色。色。3. 坐标变换坐标变换通过对默认的坐标系进行坐标变换处理，可以实现图形旋转、移位等通过对默认的坐标系进行坐标变换处理，可以实现图形旋转、移位等效果。在效果。在HTML5中坐标

11、变换主要有三种方式中坐标变换主要有三种方式（1）坐标平移）坐标平移 将默认坐标系原点，延将默认坐标系原点，延x轴方向或轴方向或y轴方向移动指定单位长度。轴方向移动指定单位长度。translate方法用于设置坐标平移，该方法应用格式为方法用于设置坐标平移，该方法应用格式为translate(x,y);其中参数其中参数x为延为延x轴方向位移像素数，参数轴方向位移像素数，参数y为延为延y轴方向位移像素数轴方向位移像素数。（2）坐标放大）坐标放大将图像延将图像延x轴方向或轴方向或y轴方向放大的倍数，轴方向放大的倍数，scale方法用于设置坐标放方法用于设置坐标放大，该方法应用格式为大，该方法应用格式为

12、scale(x,y);其中参数其中参数x为延为延x轴方向放大倍数，轴方向放大倍数，y为沿为沿y轴方向放大倍数。轴方向放大倍数。（3）坐标旋转）坐标旋转以原点为中心，将图形旋转指定的角度，以原点为中心，将图形旋转指定的角度，rotate方法用于设置坐标旋方法用于设置坐标旋转，该方法应用格式为转，该方法应用格式为rotate(angle);其中参数其中参数angle为旋转弧度，当为旋转弧度，当angle为正值时图形以顺时针方向旋转为正值时图形以顺时针方向旋转；当；当angle为负值时，图形以逆时针方向旋转。为负值时，图形以逆时针方向旋转。4. 图形组合处理图形组合处理如果要自定义多个图形重叠部分的

13、组合方式，可以通过修改画布上下如果要自定义多个图形重叠部分的组合方式，可以通过修改画布上下文对象的文对象的globalCompositeOperation属性来实现。该属性可设置属属性来实现。该属性可设置属性值定义如下表所示性值定义如下表所示5. 图形阴影图形阴影HTML5可以设置画布上下文对象的属性，为图形添加阴影效果。相可以设置画布上下文对象的属性，为图形添加阴影效果。相关属性及说明如下表所示关属性及说明如下表所示5.4 图像操作图像操作1. 画图像画图像使用使用drawImage()方法，可将页面中已经存在的方法，可将页面中已经存在的元素，元素，元素或通过元素或通过Javascript创

14、建的创建的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中通过调用中通过调用画布上下文对象的画布上下文对象的createPattern方法实现图

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

16、对像素的处理。（1）getImageData()方法用于获取指定区域内的像素，应用格式为getImageData(sx,sy,sw,sh);参数说明如下1. 绘制文字绘制文字绘制文字功能通过画布上下文对象的绘制文字功能通过画布上下文对象的fillText()方法以及方法以及strokeText()方法实现。方法实现。（1）fillText()以填充的方式绘制文字，应用格式如下以填充的方式绘制文字，应用格式如下fillText(content,dx,dy,maxLength)参数说明如下参数说明如下 content：文字内容信息：文字内容信息 dx：绘制文字开始点的横坐标：绘制文字开始点的横坐标

17、 dy：绘制文字开始点的纵坐标：绘制文字开始点的纵坐标 maxLength：可选参数，表示绘制文字的最大长度：可选参数，表示绘制文字的最大长度5.5 Canvas其他操作sx：选取图像区域起点横坐标：选取图像区域起点横坐标sy：选取图像区域起点纵坐标：选取图像区域起点纵坐标sw：选取图像区域的宽度：选取图像区域的宽度sh：选取图像区域的高度：选取图像区域的高度（2）putImageData()方法用于将处理后的像素重新绘制在指定区域内方法用于将处理后的像素重新绘制在指定区域内，应用格式为，应用格式为putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirty

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