《HTML5的图像及动画图形操作.ppt》由会员分享，可在线阅读，更多相关《HTML5的图像及动画图形操作.ppt（23页珍藏版）》请在三一文库上搜索。
1、第5章 HTML5的图像及动画,5.1 canvas元素,5.3 图形操作,5.2 使用路径画图,5.4 图像操作,5.5 canvas其他操作,5.6 制作动画,5.7 上机实践绘制时钟,5.3 图形操作,5.3.1 图形样式设置前面小节所介绍的绘图方法，绘制的只是图形边缘线条及图形框架。要想使图片变得更加绚丽，就要用到图形样式设置。HTML5通过两个步骤来实现图形样式添加：首先，定义相关样式；其次，调用指定方法使图形应用指定样式。下面我们以绘制矩形并添加样式为例，介绍相关的属性和方法。fillStyle属性：为当前画布上下文设置图形样式，默认是纯黑色。使用该属性可以设置为css颜色，一个图
2、案或一种渐变。fillRect(x,y,width,height)方法：绘制一个矩形，并使用当前的fillStyle样式。strokeStyle属性：与fillStyle属性用法相同。strokeRect(x,y,width,height)方法：绘制一个矩形，使用当前的strokeStyle样式绘制矩形的边缘，中间区域不予处理。clearRect(x,y,width,height)方法：清除指定矩形区域。下面我们通过一个例子来看这些属性和方法的具体应用，示例代码如下。function draw(),var canvas = document.getElementById(myCanvas);v
3、ar context = canvas.getContext(2d);context.fillStyle = yellow;context.strokeStyle= red;context.fillRect(60,60,130,110); /绘制矩形并在中间区域填充黄色context.strokeRect(50,50,150,130); /绘制矩形并在边缘填充红色context.clearRect(70,70,110,90); /清除指定区域像素绘制带样式的矩形 绘图保存此段代码并在浏览器中运行，得到的效果如图5-9所示。,HTML5除了提供矩形绘图样式的属性和方法外，还对其他图形也提供了相应
4、的属性及方法设置，使用方法大同小异，这里就不详细介绍了。5.3.2 渐变图形渐变在网页设计中是经常用到的一种技术手段，指的是图形填充颜色从一种颜色逐渐转变为另一种颜色。HTML5中实现渐变主要有两种方法：线性渐变和径向渐变。下面我们介绍这两种方法的具体应用。1线性渐变所谓线性渐变指的是点到点之间的渐变，在HTML5中通过createLinearGradient方法创建LinearGradient对象实现线性渐变。createLinearGradient方法的应用格式如下：createLinearGradient(xStart,yStart,xEnd,yEnd);,图5-9 为矩形添加样式,该方
5、法中涉及的各个参数说明如下。（1）xStart：渐变起始点的横坐标。（2）yStart：渐变起始点的纵坐标。（3）xEnd：渐变终止点的横坐标。（4）yEnd：渐变终止点的纵坐标。当调用该方法时，将创建一个使用起点坐标及终点坐标的LinearGradient对象，为该对象设置渐变颜色及渐变度的方法应用格式如下：addColorStop(offset,color);该方法中涉及的两个参数说明如下。（1）offset：颜色从离开渐变起始点开始变化的偏移量。（2）color：渐变使用的颜色。下面通过一个例子来演示线性渐变的具体应用和实际效果，示例代码如下。function draw()var can
6、vas=document.getElementById(myCanvas);var context=canvas.getContext(2d);,/为矩形添加渐变效果var mylinear=context.createLinearGradient(0,0, 150,50);/ 创建一个线性渐变对象mylinear.addColorStop(0,red); /设置第一阶段颜色mylinear.addColorStop(0.8,yellow); /设置第二阶段颜色mylinear.addColorStop(1,green); /设置第三阶段颜色context.fillStyle=mylinear
7、;context.fillRect(0,0,250,150);/绘制矩形/为文字添加渐变效果var linearText=context.createLinearGradient(300,50,600,50);linearText.addColorStop(0,yellow);linearText.addColorStop(0.5,grey);linearText.addColorStop(1,red);context.fillStyle=linearText;context.font=30px Arial;context.textBaseline=top;/文字对齐方式context.fil
8、lText(HTML5线性渐变文字,300,50);/参数表示文字x,y轴的位置,线性渐变 绘图此例中我们为一个矩形和一段文字分别添加渐变效果，保存此段代码并在浏览器中运行，得到效果如图5-10所示。,图5-10 线性渐变的应用效果,2径向渐变径向渐变是另外一种渐变方式，指的是以圆心为起点沿圆形半径方向向外扩散方式逐渐改变颜色。HTML5提供了createRadialGradient方法用于实现径向渐变，该方法的应用格式为：createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);该方法涉及的各个参数说明如下。（1）
9、xStart：渐变开始圆的圆心横坐标。（2）yStart：渐变开始圆的圆心纵坐标。（3）radiusStart：渐变开始圆的半径。（4）xEnd：渐变结束圆的圆心横坐标。（5）yEnd：渐变结束圆的圆心纵坐标。（6）radiusEnd：渐变结束圆的半径。该方法分别定义了两个圆形，调用该方法时将从第一个圆的圆心向外扩散渐变，直到第二个圆的外围边缘。与线性渐变相似，径向渐变也要使用addColorStop方法为渐变设置颜色偏移量及使用颜色。下面通过一个例子来演示径向渐变的具体应用和实际效果，示例代码如下。function draw(),var canvas=document.getElementB
10、yId(myCanvas);var context=canvas.getContext(2d);fillColorRadial = context.createRadialGradient(150,150,10, 150,150,200);fillColorRadial.addColorStop(0, red); / 设置第一阶段颜色fillColorRadial.addColorStop(0.2, yellow); / 设置第二阶段颜色fillColorRadial.addColorStop(0.4, black); / 设置第三阶段颜色context.fillStyle = fillCol
11、orRadial; / 填充样式context.rect(0,0,300,300); / 绘制矩形context.fill();线性渐变 绘图,本例中我们定义了两个同心圆并设置了三种渐变颜色，同时，绘制一个矩形作为渐变扩散终止边界。保存此段代码并在浏览器中运行，得到的效果如图5-11所示。本例通过使用径向渐变效果，绘制了一个类似日晕的效果图。,图5-11 径向渐变的应用效果,5.3.3 图形坐标变换有时我们对绘制图形可能会有一些更高的要求，例如要求图形旋转、移位等，这就要用到canvas API中的坐标变换功能。通过前面的介绍我们已经了解，HTML5中canvas元素坐标系的原点位于左上角，而
12、之前介绍的所有绘图方法都是以左上角为参照进行绘制的。如果对默认的坐标系进行处理，那么对应的图形也就会产生旋转、移位等效果了。在HTML5中，坐标变换主要有以下3种方式。1坐标平移坐标平移指的是将默认坐标系原点，沿x轴方向或y轴方向移动指定单位长度。translate方法用于设置坐标平移，该方法应用格式为：translate(x,y);其中参数x为沿x轴方向位移的像素数，参数y为沿y轴方向位移的像素数。下面通过一个例子介绍该方法的具体应用，示例代码如下。function draw()var canvas = document.getElementById(myCanvas);var contex
13、t = canvas.getContext(2d);,context.fillRect(0,0,100,50); /绘制第一个矩形context.translate(50,80); /设置坐标平移context.fillRect(0,0,100,50); /绘制第二个矩形使用translate设置坐标平移 绘图保存上面代码并在浏览器中执行，得到的效果如图5-12所示。,图5-12 使用translate方法设置坐标平移,在这个执行结果中，左上方的矩形是未设置坐标平移时绘制的，右下方的矩形是设置了坐标平移后绘制的。虽然两个矩形的绘制命令是一样的，但是由于坐标平移产生了不同的显示效果。2坐标放大坐
14、标放大指的是将图像沿x轴方向或y轴方向放大的倍数，scale方法用于设置坐标放大，该方法应用格式为：scale(x,y);其中参数x为沿x轴方向放大倍数，y为沿y轴方向放大倍数。下面通过一个例子介绍该方法的具体应用，示例代码如下。function draw()var canvas = document.getElementById(myCanvas);var context = canvas.getContext(2d);context.fillRect(0,0,50,50); /绘制第一个矩形context.scale(1.5,2.5); /设置坐标放大context.fillRect(60
15、,0,50,50); /绘制第二个矩形context.scale(0.5,0.5); /设置坐标缩小,context.fillRect(280,0,50,50); /绘制第三个矩形使用scale设置坐标放大和缩小 绘图保存上面代码并在浏览器中执行，得到的效果如图5-13所示。,图5-13 使用scale方法设置坐标放大与缩小,在这个执行结果中，第一个矩形是未做任何处理的矩形，第二个矩形是在第一个矩形基础上放大后的矩形，第三个矩形是在第二个矩形基础上缩小的矩形。由此我们可知，使用scale方法，参数赋值大于1时图形将被放大，参数赋值小于1时图形将被缩小。3坐标旋转坐标旋转指的是以原点为中心将图形
16、旋转指定的角度，rotate方法用于设置坐标旋转，该方法应用格式为：rotate(angle);其中参数angle为旋转弧度，当angle为正值时，图形以顺时针方向旋转；当angle为负值时，图形以逆时针方向旋转。下面通过一个例子介绍该方法的具体应用，示例代码如下。function draw()var canvas = document.getElementById(myCanvas);var context = canvas.getContext(2d);context.translate(150,150);for(var i=0; i20; i+),context.strokeRect(0
17、,0,100,30); /绘制矩形context.rotate(Math.PI/10); /设置旋转使用rotate设置坐标旋转 绘图保存上面代码并在浏览器中执行，得到的效果如图5-14所示。本例中通过循环语句，每绘制一个矩形，设置坐标旋转一定弧度，最终组成一个复杂图形。,图5-14 使用rotate方法设置坐标旋转,5.3.4 图形组合处理当我们在画布中绘制多个有重叠区域的图形时，由于绘制顺序不同，新绘制的图形将覆盖旧图形，导致重叠部分将永远显示为新绘制图形。如果要自定义多个图形重叠部分的组合方式，可以通过修改画布上下文对象的globalCompositeOperation属性来实现。该属性
18、可设置多个属性值，各属性值说明如表5-1所示。,globalCompositeOperation属性值说明,下面通过一个例子介绍如何使用globalCompositeOperation设置图形组合，示例代码如下。var i=0;function draw()var type;switch(i)case 0 : type = source-over;break;case 1 :type = copy;break;case 2 :type = darker;break;,case 3 :type = ligher;break;case 4 :type = xor;break;var canvas
19、= document.getElementById(myCanvas);var context = canvas.getContext(2d);context.globalCompositeOperation = type; /设置两个图形组合方式context.fillStyle = red; /设置填充颜色为红色context.fillRect(100,100,100,100); /绘制矩形context.fillStyle = green; /设置填充颜色为绿色context.arc(100,100,60,0,Math.PI*2,false); /绘制圆形context.fill();
20、/填充圆形i+;使用globalCompositeOperation设置图形组合, 绘图本例中绘制了一个矩形和一个圆形，且这两个图形拥有重叠部分，同时设置了包括默认组合方式在内一共五种组合方式。运行后，每单击“绘图”按钮一次，变换一种图形组合方式。保存此段代码并在浏览器中运行，得到的效果如图5-15所示。,图5-15 使用globalCompositeOperation设置图形组合方式,5.3.5 图形阴影HTML5中还可以通过设置画布上下文对象的属性，为图形添加阴影效果。添加图形阴影相关属性及说明如表5-2所示。下面通过一个例子介绍如何设置图形阴影，示例代码如下。function draw(
21、)var canvas = document.getElementById(myCanvas);,表5-2 图形阴影相关属性值说明,var context = canvas.getContext(2d);context.fillStyle = red; /设置填充颜色为红色context.fillRect(50,50,100,100); /绘制矩形context.shadowOffsetX =6; /设置阴影水平偏移量 context.shadowOffsetY =6; /设置阴影垂直偏移量context.shadowColor =gray; /设置阴影颜色context.shadowBlur=1; /设置阴影模糊度使用图形阴影 绘图保存此段代码并在浏览器中运行，得到的结果如图5-16所示。,表5-2 图形阴影相关属性值说明,图5-16 使用图形阴影,