《（本科）9 移动Web前端的HTML5 APIppt课件.pptx》由会员分享，可在线阅读，更多相关《（本科）9 移动Web前端的HTML5 APIppt课件.pptx（124页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、课程主讲人：9 移动移动Web前端的前端的HTML5 API第九章 移动Web前端的HTML5 API陈童博客：博客：目录1. 脚本化音频和视频2. 中的图形3. History API的基本概念4. Web存储5. 类型化数组和ArrayBuffer6. Blob7. 文件系统API8. 客户端数据库9. 应用程序存储和离线Web应用1. 脚本化音频和视频陈童博客：博客：脚本化音频和视频HTML5引入的和元素：由于各家浏览器制造商未能在对标准音频和视频编解码器支持上达成一致，因此，通常都需要使用元素来为指定不同格式的媒体源：脚本化音频和视频video element not supporte
2、d and Flash plugin not installed.脚本化音频和视频1. 类型选择和加载测试一个媒体元素能否播放指定类型的媒体文件，可以调用canPlayType()方法并将媒体的MIME类型(有时需要包含codec参数)传递进去。如果它不能播放该类型的煤体文件，该方法会返回一个空的字符串(一个假值)。反之，它会返回一个字符串：“maybe”或者“probably”var a = new Audio();if (a.canPlayType(audio/wav) a.src = soundeffect.wav; a.play();脚本化音频和视频2. 控制媒体播放和元素最重要的方法
3、是play()和pause()方法window.addEventListener(load, function() document.getElementById(music).play(); , false);通过设置currentTime属性来进行定点播放。该属性指定了播放器应该跳过播放的时间(单位为秒)volume属性表示播放音量，介于0(静音)-1(最大音量)之间。将muted属性设置为true则会进入静音模式，设置为false则会恢复之前指定的音量继续播放playbackRate属性用于指定媒体播放的速度。该属性值为1.0表示正常速度，大于1则表示“快进”，0-1之间的值则表示“慢放
4、”。负值则表示回放脚本化音频和视频2. 控制媒体播放controls属性指定是否在浏览器中显示播放控件loop属性是布尔类型，它指定媒体是否需要循环播放preload属性指定在用户开始播放媒体前，是否或者多少媒体内容需要预加载。该属性值为“none”则表示不需要预加载数据。为“metadata”则表示诸如时长、比特率、帧大小这样的元数据而不是媒体内容需要加载。为“auto”则表示浏览器应当预加载它认为适量的媒体内容autoplay属性指定当已经缓存足够多的媒体内容时是否需要自动开始播放脚本化音频和视频3. 查询媒体状态和元素有一些只读属性，描述媒体以及播放器当前的状态如果播放器暂停，那么pau
5、sed属性的值就为true如果播放器正在跳到一个新的播放点，那么seeking属性的值就为true如果播放器播放完媒体并且停下来，那么ended属性的值就为trueduration属性指定了媒体的时长，单位是秒initialTime属性指定了煤体的开始时间，单位也是秒。对于固定时长的媒体剪辑而言，该属性值通常是0脚本化音频和视频3. 查询媒体状态其他三个属性分别指定包含媒体时间轴、播放和缓冲状态的较细粒度视图played属性返回已经播放的时间段buffered属性返回当前已经缓冲的时间段seekable属性则返回当前播放器需要跳到的时间段。played、buffered和seekable都是T
6、imeRanges对象。每个对象都有一个length属性以及start()和end()方法，前者表示当前的一个时间段，后者分别返回当前时间段的起始时间点和结束时间点(单位都是秒)。可以使用如下代码来确定当前缓存内容的百分比：var percent_loaded = Math.floor(song.buffered.end(0) / song.duration * 100);脚本化音频和视频3. 查询媒体状态还有另外三个属性：readyState, networkState和error，每个属性都是数字类型的，而且为每个有效值都定义了对应的常量。if (song.readyState = son
7、g.HAVE_ENOUGH_DATA) song.play();readyState属性指定当前已经加载了多少媒体内容，因此同时也暗示着是否已经准备好可以播放了脚本化音频和视频3. 查询媒体状态如下表格展示了该属性的取值以及对应的意义：常量值描述HAVE_NOTHING0没有加载任何媒体内容或者元数据HAVE_METADATA1媒体元数据已经加载完毕，但是媒体内容还没有加载。也就是说，这个时候可以获取媒体的时长或者视频文件的维度，以及可以通过设置currentTime来定点播放，不过，由于没有加载任何媒体内容，因此浏览器还是无法从设置的currentTime开始播放HAVE_CURRENT_D
8、ATA2currentTime的媒体内容已经加载完成，但是还没有加载完足够的内容播放媒体。对于视频文件而言，表示当前帧的数据已经加载完成，但是下一帧的数据还未加载。这种状态通常发生在到达一个音频或者视频文件的最后的时候HAVE_FUTURE_DATA3已经加载一些的媒体内容，可以开始播放了。但是，还没有达到足够多的内容能够允许流畅地播放全部媒体内容HAVE_ENOUGH_DATA4所有媒体内容都已经加载完毕，可以流畅地播放脚本化音频和视频3. 查询媒体状态NetworkState属性指定媒体元素是否使用网络或者为什么媒体文件不使用网络：常量值描述NETWORK_EMPTY0媒体元素还没有开始使
9、用网络。比如，在还未设置媒体元素的src属性之间，就是这种状态NETWORK_IDLE1媒体元素当前没有通过网络来加载内容。这种情况有可能是内容已经加载完毕或者是所需的内容都从缓存中直接读取了，又或者是preload属性设置成了“noneMnone，还没有要求加载或者播放媒体NETWORK_LOADING2媒体元素当前通过网络来加载媒体内容NETWORK_NO_SOURCE3媒体元素无法获取媒体源脚本化音频和视频3. 查询媒体状态error对象也定义了一些描述可能的错误代码的常量：常量值描述MEDIA_ERR_ABORTED0用户要求浏览器停止加载媒体内容MEDIA_ERR_NETWORK1媒
10、体类型正确，但是发生了网络错误导致无法加载MEDIA_ERR_DECODE2媒体类型正确，但是由于编码错误导致无法正常解码和播放MEDIA_ERR_SRC_NOT_SUPPORTED3通过src属性指定的媒体文件浏览器不支持，无法播放脚本化音频和视频4. 媒体相关事件时间类型描述loadstart当媒体元素开始请求媒体数据内容的时候触发。相应的networkState属性值为NETWORK_LOADINGprogress正在通过网络加载媒体内容，对应的networkState属性值为NETWORK_LOADING。此事件一般每秒触发28次loadedmetadata媒体元数据已经加载完成，对应
11、的媒体时长和维度数据也已经获取。此时，readyState属性值第一次变为HAVE_METADATAloadeddata当前播放位置的媒体内容首次加载完毕，同时readyState属性值变为HAVE_CURRENT_DATAcanplay已经加载一些媒体内容，可以开始播放，但是还需要继续缓冲更多数据。此时readyState属性值为HAVE_FUTURE_ DATAcanplaythrough所有媒体内容加载完毕，可以流畅播放，无须暂停也无须再缓冲更多数据。此时readyState属性值为HAVE_ENOUGH_DATAsuspend已经缓冲大量数据，暂时停止下载。此时networkState
12、属性值变为NETWORK_IDLEstalled尝试加载数据，但是无法获取到数据。此时networkState始终为NETWORK_LOADING脚本化音频和视频4. 媒体相关事件play调用play()方法或者设置相应的autoplay属性。如果已经加载足够多的数据，紧接着还会触发playing事件；否则，紧接着触发waiting事件waiting由于未缓冲足够数据导致播放未能开始或者播放停止。当缓冲足够多数据后，接着会触发playing事件playing已经开始播放媒体文件timeupdatecurrentTime属性发生改变了。此事件每秒会触发460次，具体次数可能取决于系统加载速度以及
13、事件处理程序完成时间pause调用了pause()方法，暂停了播放seeding通过播放控件将当前播放时间调至一个还未缓冲的时间点，导致在内容没有加载完时，停止播放。此时，seeking属性值为trueseekedseeking属性值又变回falseended媒体播放完毕，播放停止durationchangeduration属性值发生改变volumechangevolume或者muted属性值发生改变ratechangeplaybackRate或者defaultPlaybackRate发生改变abort停止加载媒体内容。对应的error.code值为MEDIA_ERR_ABORTEDerror
14、由于发生网络错误或者其他错误阻止媒体内容的加载。此时，code值不会是MEDIA_ERR_ABORTEDemptied发生了错误或者中止，导致networkState属性值又变回NETWORK_EMPTY2. 中的图形陈童博客：博客：中的图形元素和SVG之间一个重要的区别是：使用canvas来绘制图形是通过调用它提供的方法，而使用SVG绘制图形是通过构建一棵XML元素树来实现的大部分的画布绘制API不是在元素自身上定义的，而是定义在一个“绘制上下文”对象上，获取该对象可以通过调用画布的getContext()方法调用getContext()方法时，传递一个“2d”参数，会获得一个CanvasR
15、enderingContext2D对象，使用该对象可以在画布上绘制二维图形“画布API”指的也就是CanvasRenderingContext2D对象的方法中的图形This is a red square: .This is a blue circle: .var canvas = document.getElementById(square); / 获取第一个画布元素var context = canvas.getContext(2d); / 获取2D绘制上下文context.fillStyle = #f00; / 填充一个正方形context.fillRect(0,0,10,10); /
16、填充一个正方形canvas = document.getElementById(circle); /第二个画布元素context = canvas.getContext(2d); / 获取它的绘制上下文context.beginPath(); / 开始一条新的路径context.arc(5, 5, 5, 0, 2*Math.PI, true); / 将圆形添加到该路径中context.fillStyle = #00f; / 设置填充色为蓝色context.fill(); / 填充路径中的图形1. 绘制线段和填充多边形调用beginPath()方法开始定义一条新的路径调用moveTo()方法则开
17、始定义一条新的子路径调用lineTo()方法来将该点与新的一个点通过直线连接起来c.beginPath(); / 开始一条新路径c.moveTo(100, 100); /从(100,100)开始定义一条新的子路径c.lineTo(200, 200); / 从(100,100)到(200,200)绘制一条线段c.lineTo(100, 200); / 从(200,200)到(100,200)绘制一条线段通过调用stroke()方法在路径中绘制(或者勾勒)两条线段要填充这些线段闭合的区域可以通过调用fill()方法：c.fill(); / 填充一个三角形区域c.stroke(); / 绘制三角形的
18、两条边中的图形1. 绘制线段和填充多边形使用moveTo()、lineTo()和closePath()方法绘制规则多边形定义了一个函数，用于绘制规则的多边形，同时展示了如何使用moveTo()、lineTo()和closePath()方法来定义子路径以及如何使用fill()方法和stoke()方法来绘制这些路径中的图形2. 图形属性属性含义strokeStyle勾勒线段时的颜色、渐变或图案等样式fillStyle填充时候的颜色、渐变或图案等样式font绘制文本时候的CSS字体globalAlpha绘制像素时候要添加的透明度globalCompositeOperation如何合并新的像素点和下面
19、的像素点lineCap如何渲染线段的末端lineJoin如何渲染顶点lineWidth外框线的宽度miterLimit紧急斜接顶点的最大长度textAlign文本水平对齐方式textBaseline文本垂直对齐方式shadowBlur阴影的清晰或模糊程度shadowColor下拉阴影的颜色shadowOffsetX阴影的水平偏移量shadowOffsetY阴影的垂直偏移量中的图形2. 图形属性调用save()方法会将当前图形状态压入用于已保存状态的栈上调用restore()方法会从栈中弹出并恢复最近一次保存的状态Example 21-5 图形状态管理工具/ 恢复最后一次保存的图形状态，但是让该
20、状态从栈中弹出CanvasRenderingContext2D.prototype.revert = function() this.restore(); / 恢复最后一次保存的图形状态 this.save(); / 再次保存它以便后续使用 return this; / 允许方法链;中的图形2. 图形属性CanvasRenderingContext2D.prototype.attrs = function(o) if (o) for(var a in o) /遍历o对象中的每个属性 thisa = oa; / 将它设置成图形属性 return this; / 启用方法链 else return
21、 fillStyle: this.fillStyle, font: this.font, globalAlpha: this.globalAlpha, globalCompositeOperation: this.globalCompositeOperation, lineCap: this.lineCap, lineJoin: this.lineJoin, lineWidth: this.lineWidth, miterLimit: this.miterLimit, textAlign: this.textAlign, textBaseline: this.textBaseline, sha
22、dowBlur: this.shadowBlur, shadowColor: this.shadowColor, shadowOffsetX: this.shadowOffsetX, shadowOffsetY: this.shadowOffsetY, strokeStyle: this.strokeStyle ;中的图形3. 画布的尺寸和坐标元素的width以及height属性和对应的画布对象的宽度以及高度属性决定了画布的尺寸。画布的默认坐标系是以画布最左上角为坐标原点(0,0)0越往右X轴的数值越大，越往下Y轴的数值越大默认情况下，会按照它设置的HTML width和height属性值来显
23、示画布大小。但是，和其他HTML元素一样，元素还可以通过CSS的width和height样式属性来设置它的屏幕显示大小。如果指定画布的屏幕显示大小和它的实际尺寸不同，那么画布上所有的像素都会自动缩放以适合通过CSS属性指定的屏幕显示尺寸中的图形4. 坐标系变换尽管通过调用setTransform()方法能够直接设置画布的变换矩阵，但是通过转换、旋转和缩放操作更容易实现坐标系变换调用translate()方法只是简单地将坐标原点进行上、下、左、右移动调用rotate()方法会将坐标轴根据指定角度(画布API总是以弧度制来表示角度。要将角度制转换成弧度制，可以通过Math.PI来对180进行乘除来
24、实现)进行顺时针旋转调用scale()方法实现对X轴或者Y轴上的距离进行延长和缩短中的图形4. 坐标系变换把变换想象成一个在变换后坐标系中的点(x,y)，到了原来的坐标系统就变成了(x,y)调用c.translate(dx,dy)方法就等效于如下表达式：x = x + dx; / 新系统中X轴的0，在原系统中就是dxy = y + dy;调用t.scale(sx,sy)就等效于如下表达式：x = sx * x; y = sy * y;调用rotate(a)可以通过三角法则等效于如下表达式：x = x * cos(a) - y * sin(a);y = y * cos(a) + x * sin(
25、a);中的图形4. 坐标系变换任意的仿射变换可以利用af 6个参数等效描述成如下形式：x = ax + cy + ey = bx + dy + f通过向transform()方法传递上述6个参数就可以应用任意仿射变换到当前的坐标系/ 扭曲变换：/ x = x + kx*y;/ y = y + ky*x;function shear(c,kx,ky) c.transform(1, ky, kx, 1, 0, 0); function rotateAbout(c,theta,x,y) var ct = Math.cos(theta), st = Math.sin(theta); c.transfo
26、rm(ct, -st, st, ct, -x*ct-y*st+x, x*st-y*ct+y);中的图形4. 坐标系变换通过坐标系变换实现绘制科赫雪花证明了坐标变换的威力：通过递归调用translate()方法、rotate()方法以及scale()方法来实现绘制科赫雪花分形。例子的结果展示了0-4不同分形级别的科赫雪花中的图形5. 绘制和填充曲线arc()：此方法实现在当前子路径中添加一条弧。它首先将当前点和弧形的起点用一条直线连接，然后用圆的一部分来连接弧形的起点和终点，并把弧形终点作为新的当前点。要绘制一个弧形需要指定6个参数：圆心的X, Y坐标、圆的半径、弧形的起始和结束的角度以及弧形的
27、方向(顺时针还是逆时针)arcTo()：此方法绘制一条直线和一段圆弧，绘制的圆弧有指定的半径并且和当前点到P1的直线以及经过P1和P2的直线都相切。此种绘制圆弧的方法看似有点儿奇怪，但是对于绘制带有圆角的形状是非常有用的。当指定的半径为0时，此方法只会绘制一条从当前点到P1的直线。而当半径值非零时，此方法会绘制一条从当前点到P1的直线，然后将这条直线按照圆形形状变成曲线，一直到它指向P2方向中的图形5. 绘制和填充曲线bezierCurveTo()：此方法实现在当前子路径中添加一个新的点，并利用三次贝赛尔曲线将它和当前点相连。曲线的形状由两个“控制点”C1和C2确定。曲线从当前点开始，沿着C1
28、点的方向延伸，再沿着C2的方向延伸一直到点P。曲线在这些点之间的过渡都是很平滑的。最后点P会成为当前点quadraticCurveTo()：此方法和bezierCurveTo()方法类似，不同的是它使用的是二次贝塞尔曲线而不是三次贝塞尔曲线并且只有一个控制点中的图形5. 绘制和填充曲线Example 21-7在路径中添加曲线中的图形6. 矩形fillRect()方法使用当前的fillStyle来填充指定的矩形strokeRect()方法使用当前的strokeStyle和其他线段的属性来勾勒指定矩形的外边框clearRect()方法采用透明的黑色像素(所以空白画布的默认颜色)来填充矩形最后一个用
29、于绘制矩形的方法是rect()，此方法会对当前路径产生影响：它会在将指定的矩形添加到当前路径的子路径中。和其他用于定义路径的方法一样，它本身不会自动做任何和填充以及勾勒相关的事情中的图形7. 颜色、透明度、渐变以及图案要指定一种纯色，可以使用HTML4标准定义的颜色名字或者使用CSS颜色串：context.strokeStyle = blue; / 用蓝色勾勒线段context.fillStyle = #aaa; / 用浅灰色填充区域目前，支持CSS3颜色的浏览器除了允许标准的16进制RGB颜色之外，还允许使用RGB, RGBA, HSL和HSLA颜色空间HSL颜色空间采用三个数字来指定颜色，
30、这个三个数字分别代表色调、饱和度和亮度。通过设置globalAlpha属性，每一个绘制的像素都会将其alpha值乘以设置的globaAlpha值中的图形7. 颜色、透明度、渐变以及图案要使用背景图片的图案，可以将fillStyle或者strokeStyle属性设置成CanvasPattern对象，通过调用上下文对象的createPattern()方法var image = document.getElementById(myimage);c.fillStyle = c.createPattern(image, repeat);createPattern()方法的第一个参数指定了用做图案的图片。
31、它必须是文档中的一个元素、元素或者元素第二个参数通常是“repeat”，表示采用重复的图片填充，这和图片大小是无关的。除此之外，还可以使用“repeat-x”、repeat-y”或者“no-repeat”中的图形7. 颜色、透明度、渐变以及图案要注意的是还可以采用一个元素(甚至是一个从未添加到文档中并且不可见的元素)作为另外一个元素的图案：/ 创建一个屏幕外画布var offscreen = document.createElement(canvas); offscreen.width = offscreen.height = 10; / 设置它的大小/ 获取它的上下文并进行绘制offscre
32、en.getContext(2d).strokeRect(0,0,6,6); var pattern = c.createPattern(offscreen,repeat); / 将它用做图案中的图形7. 颜色、透明度、渐变以及图案要使用渐变色来进行填充或勾勒，可以将fillStyle属性(或者strokeStyle属性)设置为一个CanvasGradient对象该对象可以通过调用上下文对象上的createLinearGradient()或createRadialGradient()方法来返回createLinearGradient()方法需要的参数是定义一条线段两个点的坐标createRad
33、ialGradient()方法需要的参数是两个圆的圆心和半径。小圆内的区域和大圆外的区域都会用纯色来填充；而两圆之间的区域会用渐变色来填充中的图形7. 颜色、透明度、渐变以及图案在创建了CanvasGradient对象以及定义了画布中要填充的区域之后，必须通过调用CanvasGradient对象的addColorStop()方法来定义渐变色该方法的第一个参数是之间的一个数字，第二个参数是一个CSS颜色值必须至少调用该方法两次来定义一个简单的颜色渐变，但是可以调用它多次在0.0位置的颜色会出现在渐变的起始，在1.0位置的颜色会出现在渐变色最后。如果还指定其他的颜色，那么它们会出现在渐变指定的小数
34、位置。其他地方的颜色会进行平滑的过渡中的图形7. 颜色、透明度、渐变以及图案/ 一个线性渐变，沿着画布的对角线(假设没有进行坐标系变换)var bgfade = c.createLinearGradient(0,0,canvas.width,canvas.height);bgfade.addColorStop(0.0, #88f); / 以左上角为亮蓝色开始bgfade.addColorStop(1.0, #fff); / 一直到右下角以白色结束/两个同心圆之间的一种渐变，中间为透明色/然后慢慢变为灰色半透明，最后再回到透明色var peekhole = c.createRadialGradi
35、ent(300,300,100, 300,300,300);peekhole.addColorStop(0.0, transparent); / 透明peekhole.addColorStop(0.7, rgba(100,100,100,.9); / 灰色半透明peekhole.addColorStop(1.0, rgba(0,0,0,0); / 再次透明中的图形7. 颜色、透明度、渐变以及图案c.fillStyle = bgfade; /以线性渐变开始c.fillRect(0,0,600,600); / 填充整个画布c.strokeStyle = pattern; / 使用图案来勾勒线段c.
36、lineWidth = 100; /使用非常宽的线段c.strokeRect(100,100,400,400); / 绘制一个大的正方形c.fillStyle = peekhole; / 切换到辐射状渐变c.fillRect(0,0,600,600); / 使用半透明填充来遮罩画布中的图形9. 文本要在画布上绘制文本，通常使用fillText)方法来使用fillStyle属性指定的颜色(渐变或者图案)绘制文本要想在大字号文本上加特效，可以使用strokeText()方法，该方法会在每个字形外边绘制轮廓fillText()方法和strokeText()方法都接受要绘制的文本内容作为第一个参数，以
37、及文本绘制位置的X轴坐标和Y轴坐标作为第二个和第三个参数。但是这两个方法都不会对当前路径和当前点产生影响中的图形9. 文本font属性指定了绘制文本时候采用的字体。该属性值是一个字符串，语法和css的font属性一致。下面是一些例子：48pt sans-serifbold 18px Times Romanitalic 12pt monospaced“bolder smaller serif”textAlign属性指定了文本应当参照X轴坐标如何进行水平对齐textBaseline属性则指定了文本应当参照Y轴坐标如何进行垂直对齐中的图形9. 文本textAlign属性的默认值是“start”。对于
38、从左到右的文本而言，“start”方式的对齐和“left”方式的对齐是一样的，“end”方式的对齐和“right”方式的对齐是一样的textBaseline属性的默认值是“alphabetic”，它适合用于拉丁语系和其他类似语系的字母。“ideographic”值用于诸如中文和日文之类的表意文字。“hanging”值则是用于梵文和类似的文字(大多用于印度语)。“top”、“middle”以及“bottom”这样的基线都是纯几何基线，它们都是基于设置的字体的“em square”measureText()方法返回一个TextMetrics对象，它指定在使用当前字体绘制文本时的尺寸。TextMet
39、rics对象中包含的唯一“metric”的是width中的图形10. 裁剪可以调用Clip()方法来定义一个裁剪区域。一旦定义了一个裁剪区域，在该区域外将不会绘制任何内容下例展示了一个使用了裁剪区域来绘制的图形，在该图形中，勾勒中间的竖直条带以及下面的文字时都没有使用裁剪区域，而在填充三角形之前，定义了三角形裁剪区域中的图形10. 裁剪c.font = bold 60pt sans-serif; / 大号字体c.lineWidth = 2; / 窄线段c.strokeStyle = #000; / 黑色线段/ 勾勒矩形轮廓和文本轮廓c.strokeRect(175, 25, 50, 325);
40、 / 中间竖直的条带c.strokeText(“”, 15, 330); / 使用strokeText()方法而不是fillText()方法/ 在外部定义一条包含内部的复杂路径polygon(c,3,200,225,200); / 大三角形polygon(c,3,200,225,100,0,true); / 在内部再绘制一个小三角形c.clip(); / 将该路径定义成裁剪区域/ 用5个像素宽的线段来勾勒路径，完全在裁剪区域内c.lineWidth = 10; / 另外5个像素的线段被裁剪了c.stroke();/填充在裁剪区域内的矩形部分和文本部分c.fillStyle = #aaa / 暗
41、灰色c.fillRect(175, 25, 50, 325); / 填充竖直的条带c.fillStyle = #888 / 深灰色c.fillText(, 15, 330); / 填充文本中的图形11. 阴影shadowColor属性指定阴影的颜色。其默认值是完全透明的黑色，该属性设置为一个表示颜色的字符串shadowOffsetX属性和shadowOffsetY属性指定阴影的X轴和Y轴的偏移量。这两个属性的默认值都是0shadowBlur属性指定了阴影边缘的模糊程度。其默认值为0，表示产生一个清晰明亮的阴影。该属性值越大表示阴影越模糊中的图形11. 阴影Example 21-8设置阴影属性/
42、 定义一种不明显的阴影c.shadowColor = rgba(100,100,100,.4); / 半透明灰色c.shadowOffsetX = c.shadow OffsetY = 3; / 偏移阴影到右下角部分c.shadowBlur = 5; / 柔化阴影的边缘/ 使用阴影在一个蓝色的方框中绘制一些文本c.lineWidth = 10;c.strokeStyle = blue;c.strokeRect(100, 100, 300, 200); / 绘制一个矩形c.font = Bold 36pt Helvetica;c.fillText(Hello World, 115, 225);
43、/ 绘制一些文本/ 定义一个模糊点的阴影。较大的偏移量使绘制的物体浮得越高/ 要注意透明的阴影是如何和蓝色的方框重叠的c.shadowOffsetX = c.shadowOffset Y = 20;c.shadowBlur = 10;c.fillStyle = red; / 绘制一个纯红色的矩形c.fillRect(50,25,200,65); / 该红色矩形浮在蓝色方框上面中的图形12. 图片drawImage()用于将源图片(或者源图片中的矩形区域中)的像素内容复制到画布上，有需要的时候可以对图片进行缩放和旋转调用drawImage()方法的时候可以传递3个、5个或者9个参数其中第一个参数
44、是要将其像素复制到画布上的源图片。这个图片参数通常是一个元素或者通过Image()构造函数创建的一张屏幕外图片，但是它还可以是另一个元素或者甚至是一个元素。如果指定的或者元素正在加载数据，那么调用drawImage()方法什么也不做中的图形12. 图片如果传递3个参数给drawImage()方法，那么第二个和第三个参数指定待绘制图片的左上角位置的X轴和Y轴坐标。以这种方式调用的话，源图片的所有内容都会复制到画布上。指定的X轴和Y轴坐标会相应地转换到当前的坐标系中，如果有需要的话可以对图片进行缩放和旋转如果传递5个参数给drawImage()方法，那么另外两个参数分别是宽度和高度。X轴和Y轴坐标
45、以及宽度和高度，这4个参数在画布上定义了一个目标矩形局域。图片的左上角定位在点(x,y)，而其右下角则定位在点(x+width,y+height)。同样，这种调用方式也会复制整个源图片。该目标矩形区域会在当前坐标系中度量，而即使不指定缩放变换源图片也会自动伸缩适应目标矩形区域中的图形12. 图片如果传递9个参数给drawImage()方法，那么这些参数还同时指定了一个源矩形区域和一个目标矩形区域，并且只会复制源矩形区域内的像素。其中第2-5个参数指定了源矩形区域。它们是以CSS像素来度量的。如果指定的源图片是另一个画布，那么源矩形区域会使用该画布的默认坐标系，并会忽略指定的任何变换。第6-9个
46、参数指定了图片要绘制在的目标矩形区域，该区域是在画布当前的坐标系而不是默认的坐标系中绘制的中的图形12. 图片例子使用9个参数来调用drawImage()方法，从一个画布部分区域中复制像素并将它们绘制出来，同时在同相同画布上进行放大和旋转Example 21-9 使用drawImage()方法/ 在左上角绘制一条线段c.moveTo(5,5);c.lineTo(45,45);c.lineWidth = 8;c.lineCap = round;c.stroke();/ 定义一个变换c.translate(50,100); c.rotate(-45*Math.PI/180); / 让线段变得更直c
47、.scale(10,10); / 将它放大到能够看到每个像素c.drawImage(c.canvas, 0, 0, 50, 50, / 源矩形区域：未变换 0, 0, 50, 50); / 目标矩形区域：变换过中的图形12. 图片除了能将一张图片绘制到一张画布中之外，还能使用toDataURL()方法将画布中内容抽取成一张图片toDataURL()方法是画布元素自身的方法，而不是CanvasRenderingContext2D对象的方法。通常调用toDataURL()方法的时候不传递任何参数，它会将画布内容以PNG图片的形式返回，同时编码成一个字符串数据，用URL表示。返回的URL可以在元素中
48、使用，同时也可以使用如下代码来实现画布静态截图功能：var img = document.createElement(img); / 创建一个元素img.src = canvas.toDataURL(); /设置其src属性document.body.appendChild(img); /把它追加到文档后面中的图形13. 合成要指定合成的方式，可以设置globalCompositeOperation属性。该属性的默认值是“source-over”，表示将源像素绘制在目标像素上，对于半透明的源像素就直接合并如果将该属性设置为“copy，则表示关闭合成：源像素将原封不动地复制到画布上，直接忽略目标
49、像素“destination-over”，表示将新的源像素绘制在已有目标像素的下面。如果目标像素是半透明或者透明的话，所有或者部分源像素的颜色在最终颜色上就是可见的中的图形13. 合成展示了这11种合成方式各自的效果，所有这些绘制的像素要么是完全透明要么是完全不透明。先绘制正方形，将其作为目标。然后再设置globalComposite0peration属性，最后绘制圆形，将其作为源另一个例子中，作为原始图形的圆形和作为目的图形的正方形都是采用渐变色来绘制的，以便每个像素的透明度都会不同中的图形14. 像素操作调用getImageData()方法会返回一个ImageData对象，该对象表示画布矩
50、形区域中的原始使用createImageData()方法可以创建一个空的ImageData对象ImageData对象中的像素是可写的，然后再通过putImageData()方法将这些像素复制回画布中传递给getImageData()方法的矩形是在默认的坐标系中的，当调用putImageData()方法时，指定的位置也是按照默认的坐标系putImageData()方法会忽略所有的图形属性。它不会进行任何合成操作，也不会用globalAlpha乘以像素来显示，更不会绘制阴影中的图形14. 像素操作使用ImageData实现动态模糊例子展示了如何在一张画布中的图形上创建一种简单的动态模糊或者“涂抹”