5.3 HTML5的图像及动画图形操作.ppt

第5章HTML5的图像及动画 5 1canvas元素 5 3图形操作 5 2使用路径画图 5 4图像操作 5 5canvas其他操作 5 6制作动画 5 7上机实践 绘制时钟 5 3图形操作 5 3 1图形样式设置前面小节所介绍的绘图方法 绘制的只是图形边缘线条及图形框架 要想使图片变得更加绚丽 就要用到图形样式设置 HTML5通过两个步骤来实现图形样式添加 首先 定义相关样式 其次 调用指定方法使图形应用指定样式 下面我们以绘制矩形并添加样式为例 介绍相关的属性和方法 fillStyle属性 为当前画布上下文设置图形样式 默认是纯黑色 使用该属性可以设置为css颜色 一个图案或一种渐变 fillRect x y width height 方法 绘制一个矩形 并使用当前的fillStyle样式 strokeStyle属性 与fillStyle属性用法相同 strokeRect x y width height 方法 绘制一个矩形 使用当前的strokeStyle样式绘制矩形的边缘 中间区域不予处理 clearRect x y width height 方法 清除指定矩形区域 下面我们通过一个例子来看这些属性和方法的具体应用 示例代码如下 functiondraw varcanvas document getElementById myCanvas varcontext 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除了提供矩形绘图样式的属性和方法外 还对其他图形也提供了相应的属性及方法设置 使用方法大同小异 这里就不详细介绍了 5 3 2渐变图形渐变在网页设计中是经常用到的一种技术手段 指的是图形填充颜色从一种颜色逐渐转变为另一种颜色 HTML5中实现渐变主要有两种方法 线性渐变和径向渐变 下面我们介绍这两种方法的具体应用 1 线性渐变所谓线性渐变指的是点到点之间的渐变 在HTML5中通过createLinearGradient方法创建LinearGradient对象实现线性渐变 createLinearGradient方法的应用格式如下 createLinearGradient xStart yStart xEnd yEnd 图5 9为矩形添加样式 该方法中涉及的各个参数说明如下 1 xStart 渐变起始点的横坐标 2 yStart 渐变起始点的纵坐标 3 xEnd 渐变终止点的横坐标 4 yEnd 渐变终止点的纵坐标 当调用该方法时 将创建一个使用起点坐标及终点坐标的LinearGradient对象 为该对象设置渐变颜色及渐变度的方法应用格式如下 addColorStop offset color 该方法中涉及的两个参数说明如下 1 offset 颜色从离开渐变起始点开始变化的偏移量 2 color 渐变使用的颜色 下面通过一个例子来演示线性渐变的具体应用和实际效果 示例代码如下 functiondraw varcanvas document getElementById myCanvas varcontext canvas getContext 2d 为矩形添加渐变效果varmylinear context createLinearGradient 0 0 150 50 创建一个线性渐变对象mylinear addColorStop 0 red 设置第一阶段颜色mylinear addColorStop 0 8 yellow 设置第二阶段颜色mylinear addColorStop 1 green 设置第三阶段颜色context fillStyle mylinear context fillRect 0 0 250 150 绘制矩形 为文字添加渐变效果varlinearText context createLinearGradient 300 50 600 50 linearText addColorStop 0 yellow linearText addColorStop 0 5 grey linearText addColorStop 1 red context fillStyle linearText context font 30pxArial context textBaseline top 文字对齐方式context fillText HTML5线性渐变文字 300 50 参数表示文字x y轴的位置 线性渐变绘图此例中我们为一个矩形和一段文字分别添加渐变效果 保存此段代码并在浏览器中运行 得到效果如图5 10所示 图5 10线性渐变的应用效果 2 径向渐变径向渐变是另外一种渐变方式 指的是以圆心为起点沿圆形半径方向向外扩散方式逐渐改变颜色 HTML5提供了createRadialGradient方法用于实现径向渐变 该方法的应用格式为 createRadialGradient xStart yStart radiusStart xEnd yEnd radiusEnd 该方法涉及的各个参数说明如下 1 xStart 渐变开始圆的圆心横坐标 2 yStart 渐变开始圆的圆心纵坐标 3 radiusStart 渐变开始圆的半径 4 xEnd 渐变结束圆的圆心横坐标 5 yEnd 渐变结束圆的圆心纵坐标 6 radiusEnd 渐变结束圆的半径 该方法分别定义了两个圆形 调用该方法时将从第一个圆的圆心向外扩散渐变 直到第二个圆的外围边缘 与线性渐变相似 径向渐变也要使用addColorStop方法为渐变设置颜色偏移量及使用颜色 下面通过一个例子来演示径向渐变的具体应用和实际效果 示例代码如下 functiondraw varcanvas document getElementById myCanvas varcontext 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 fillColorRadial 填充样式context rect 0 0 300 300 绘制矩形context fill 线性渐变绘图 本例中我们定义了两个同心圆并设置了三种渐变颜色 同时 绘制一个矩形作为渐变扩散终止边界 保存此段代码并在浏览器中运行 得到的效果如图5 11所示 本例通过使用径向渐变效果 绘制了一个类似日晕的效果图 图5 11径向渐变的应用效果 5 3 3图形坐标变换有时我们对绘制图形可能会有一些更高的要求 例如要求图形旋转 移位等 这就要用到canvasAPI中的坐标变换功能 通过前面的介绍我们已经了解 HTML5中canvas元素坐标系的原点位于左上角 而之前介绍的所有绘图方法都是以左上角为参照进行绘制的 如果对默认的坐标系进行处理 那么对应的图形也就会产生旋转 移位等效果了 在HTML5中 坐标变换主要有以下3种方式 1 坐标平移坐标平移指的是将默认坐标系原点 沿x轴方向或y轴方向移动指定单位长度 translate方法用于设置坐标平移 该方法应用格式为 translate x y 其中参数x为沿x轴方向位移的像素数 参数y为沿y轴方向位移的像素数 下面通过一个例子介绍该方法的具体应用 示例代码如下 functiondraw varcanvas document getElementById myCanvas varcontext 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 坐标放大坐标放大指的是将图像沿x轴方向或y轴方向放大的倍数 scale方法用于设置坐标放大 该方法应用格式为 scale x y 其中参数x为沿x轴方向放大倍数 y为沿y轴方向放大倍数 下面通过一个例子介绍该方法的具体应用 示例代码如下 functiondraw varcanvas document getElementById myCanvas varcontext canvas getContext 2d context fillRect 0 0 50 50 绘制第一个矩形context scale 1 5 2 5 设置坐标放大context fillRect 60 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 坐标旋转坐标旋转指的是以原点为中心将图形旋转指定的角度 rotate方法用于设置坐标旋转 该方法应用格式为 rotate angle 其中参数angle为旋转弧度 当angle为正值时 图形以顺时针方向旋转 当angle为负值时 图形以逆时针方向旋转 下面通过一个例子介绍该方法的具体应用 示例代码如下 functiondraw varcanvas document getElementById myCanvas varcontext canvas getContext 2d context translate 150 150 for vari 0 i 20 i context strokeRect 0 0 100 30 绘制矩形context rotate Math PI 10 设置旋转 使用rotate设置坐标旋转绘图保存上面代码并在浏览器中执行 得到的效果如图5 14所示 本例中通过循环语句 每绘制一个矩形 设置坐标旋转一定弧度 最终组成一个复杂图形 图5 14使用rotate方法设置坐标旋转 5 3 4图形组合处理当我们在画布中绘制多个有重叠区域的图形时 由于绘制顺序不同 新绘制的图形将覆盖旧图形 导致重叠部分将永远显示为新绘制图形 如果要自定义多个图形重叠部分的组合方式 可以通过修改画布上下文对象的globalCompositeOperation属性来实现 该属性可设置多个属性值 各属性值说明如表5 1所示 globalCompositeOperation属性值说明 下面通过一个例子介绍如何使用globalCompositeOperation设置图形组合 示例代码如下 vari 0 functiondraw vartype switch i case0 type source over break case1 type copy break case2 type darker break case3 type ligher break case4 type xor break varcanvas document getElementById myCanvas varcontext 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 填充圆形i 使用globalCompositeOperation设