HTML5+CSS3网页设计基础教程第5章.ppt

第*页 5.5.3 绘制径向渐变 径向渐变，其实就是环形的渐变，由圆心（或者是较小的同心圆）开始向外扩散渐变的效果。线性渐变指定了起点和终点，径向渐变则指定了开始的结束园的圆心和半径。径向渐变使用createRadialGradient来获得Canvas的CanvasGradient对象，所以addColorStop方法也是通用的。使用方法如下： CanvasGradient = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1) 第*页 5.5.4 绘制图案 canvas中，createPattern方法用来实现图案效果，在指定的方向内重复指定的元素。元素可以是图片、视频，或者其他canvas元素。被重复的元素可用于绘制/填充矩形、圆形或线条等等。其用法如下： context.createPattern(image,repeat|repeat-x|repeat-y|no-repeat); 第*页 5.5.5 设置图形的透明度 canvas绘图中，有两种设置透明度的方法：globalAlpha属性和rgba方法。globalAlpha属性适合为大量图形设置相同的透明度。rgba方法则是通过设置色彩透明度的参数来为图形设置不同的透明度。 第*页 5.5.6 创建阴影 canvas提供了绘制元素阴影的功能，主要的属性包括：shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY。其中，shadowColor定义阴影颜色样式，shadowBlur定义阴影模糊系数，shadowOffsetX定义阴影X轴偏移量，shadowOffsetY定义阴影Y轴偏移量。 第*页 主要内容 5.1 canvas元素基础 5.2 绘制简单图形 5.3 绘制贝塞尔曲线 5.4 绘制变形图形 5.5 丰富图形效果 5.6 图像处理 5.7 绘制文字 5.8 本章小结 第*页 5.6 图像处理 5.6.1 裁剪图像 5.6.2 像素处理 5.6.3 组合图形 5.6.4 混合图像 第*页 5.6.1 裁剪图像 canvas的图像剪裁功能是指，在画布内使用路径，只绘制该路径所包括区域内的图像，不绘制路径外部的图像。 使用图像上下文对象的不带参数的clip方法来实现canvas元素的图像剪裁功能。该方法使用路径来对canvas画布设置一个剪裁区域。因此，必须先创建好路径。路径创建完成后，调用clip方法设置剪裁区域。 第*页 5.6.2 像素处理 像素处理需要用到getImageData和putImageData两个方法，先用getImageData复制canvas画布中的像素数据，然后对获取的像素数据进行处理，最后再通过putImageData将处理完的数据粘贴到canvas画布。 第*页 5.6.3 组合图形 HTML5有11种组合图形的方式，只要将其设置到context.globalCompositeOperation即可。使用方法为： context.globalCompositeOperation = type 第*页 5.6.4 混合图像 图像混合需要使用到canvas的globalCompositeOperation属性，使用方法为： context.globalCompositeOperation=属性值 第*页 主要内容 5.1 canvas元素基础 5.2 绘制简单图形 5.3 绘制贝塞尔曲线 5.4 绘制变形图形 5.5 丰富图形效果 5.6 图像处理 5.7 绘制文字 5.8 本章小结 第*页 5.7 绘制文字 5.7.1 绘制填充文字 5.7.2 文字相关属性 5.7.3 绘制轮廓文字 5.7.4 获取文字宽度 5.7.5 文字绘制实战 第*页 5.7.1 绘制填充文字 fillText方法用填充的方式绘制字符串，该方法的使用格式如下： void fillText(text,x,y,[maxWidth]); 第*页 5.7.2 文字相关属性 在使用canvas进行文字的绘制之前，可以先对该对象的有关文字绘制的属性进行设置，这些属性如下： font：指定正在绘制的文字的样式。如果要在绘制文字时改变字体样式，只需要更改该属性的值即可。默认的字体样式为10px sans-serif。例如： context.font = 20pt Times New Roman; textAlign：指定正在绘制的文字的对齐方式，有left（左对齐）、right（右对齐）、center（居中对齐）、start（如果文字从左往右排版则左对齐，如果从右往左排版则右对齐）和end（和st