HTML5 开发Web,MobileWeb & Apps范圣刚安博中程在线
HTML5 Canvas, Audio & Video图形图像和多媒体
Canvas
画布Canvascanvas元素的定义:"它是依赖分辨率的位图画布,你可以在canvas上面绘制任意图形,甚至加载照片。"要使用canvas 元素,首先必须设置width 和height 属性,也就是我们可以绘图的区域的大小。安博中程在线<ca...
2D上下文安博中程在线绘图前需要调用getContext()方法并传入上下文名字,来取得绘图上下文对象的引用。传入"2d"就可以取得2D上下文对象。2D上下文的坐标开始于<canvas>元素的左上角,原点坐标是(0, 0)。x值越大表示越靠右,...
填充和描边2D上下文两种基本操作是填充和描边安博中程在线填充,就是用指定的样式(颜色,渐变或者图形)填充图形;描边,就是只在图形的边缘画线。··6/45
fillStyle和strokeStyle填充操作的结果取决于fillStyle 属性,而描边操作的结果取决于strokeStyle 属性。安博中程在线下面的代码将strokeStyle 设置为red(CSS中的颜色名),将fillStyle ...
绘制矩形矩形是唯一一种可以直接在2D上下文中绘制的形状。与矩形有关的方法包括:fillRect(), strokeRect()和clearRect()这三个方法都能够接收四个参数:矩形的x坐标,矩形的y坐标,矩形宽度和矩形高度。单位都是像素。安...
fillRect()fillRect() 方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过fillStyle 属性指定。安博中程在线//绘制红色矩形fillrect_context.fillStyle="#ff0000";fillrect...
strokeRect()strokeRect() 方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过strokeStyle 属性指定。安博中程在线//红色描边矩形strokerect_context.strokeStyle="#ff000...
clearRect()clearRect() 方法用于清除画布上的矩形区域。通过绘制形状然后再清除指定的区域,就可以生成有意思的效果,比如把某个形状切掉一块。安博中程在线//绘制红色矩形clearrect_context.fillStyle="...
绘制路径2D绘制上下文支持很多在画布上绘制路径的方法,通过路径可以创造出复杂的形状和线条。要绘制路径首先必须调用beginPath() 方法, 表示要开始绘制新路径,然后再调用相应的绘制路径方法。安博中程在线moveTo(x, y): 将绘图游...
安博中程在线//开始路径pathcanvas_context.beginPath();//绘制外圆pathcanvas_context.arc(100,100,75,0,2*Math.PI,false);//绘制内圆pathcanvas_con...
安博中程在线 14/45
绘制文本模拟了在网页中正常显示文本,fillText()方法的三个主要参数:要绘制的字符串,x坐标和y坐标。fillText以下面三个属性为基础:安博中程在线context.font="bold12pxsans-serif";context.t...
Canvas绘制一个坐标系安博中程在线 16/45
变换通过上下文的变化,可以把处理后的图像绘制到画布上。2D绘制上下文支持各种基本的绘制变换。安博中程在线rotate(angle): 围绕原点旋转图像angle角度scale(scaleX, scaleY): 缩放图像,在x方向乘以scaleX...
变换 - translate在前面绘制秒针的例子中,如果我们把原点变换成表盘的中心,那么再绘制表针就容易多了。安博中程在线context.beginPath();context.arc(100,100,75,0,2*Math.PI,false)...
变换 - rotate安博中程在线//变换原点context.translate(100,100);//旋转表针context.rotate(1);context.moveTo(0,0);context.lineTo(0,-65);contex...
颜色渐变渐变是两种或者更多颜色的平滑过渡。canvas的绘图上下文支持两种类型的渐变:安博中程在线createLinearGradient(x0, y0, x1, y1)沿着直线从(x0, y0)至(x1, y1)绘制渐变。createRadi...
线性渐变demo安博中程在线 21/45
Gradient渐变Demo安博中程在线 22/45
绘制图像使用drawImage()可以把一幅图像绘制到画布上,根据期望的最终结果的不同,drawImage()提供了三种绘制图片的方法:安博中程在线drawImage( image, dx, dy )接受一个图片,并将之画到canvas中。给出...
图片demo安博中程在线 24/45
canvas导成图像安博中程在线varimgURI=imagedrawing.toDataURL("image/png");varimage=document.createElement("img");image.src=imgURI;docu...
<Video> & <Audio>不依赖插件就能嵌入音频和视频内容
视频容器安博中程在线MPEG-4Flash 视频OggWebM音频视频交错·····27/45
视频编解码器安博中程在线H.264TheoraVP8···28/45
音频编解码器安博中程在线MP3AACVP8Vorbis····29/45
MPEG4 编码安博中程在线HandBrake·30/45
Ogg 编码安博中程在线Firefogg·31/45
WebM 编码安博中程在线Firefoggffmpeg··32/45
基本用法安博中程在线<videoid="myMovie"src="images/sample.m4v"preloadcontrolsautoplay>视频播放器不可用。</video><audioid="myAudio"src="images/...
指定不同的媒体来源因为并非所有的浏览器都支持所有的媒体格式,所以可以指定多个不同的媒体来源。像下面这样使用一个或多个<source>元素。安博中程在线<videoid="videoShowcase"width="848"height="352"...
主要属性属性 数值类型 说明autoplay 布尔值 取得或设置autoplay标志controls 布尔值 取得或者设置controls属性,用于隐藏或者显示浏览器内置的控件duration 浮点数 媒体的总播放时间(秒数)ended 布尔值...
自定义媒体播放器使用video和audio的play和pause方法,可以手工控制媒体文件的播放。组合使用属性,事件和这两个方法,很容创建一个自定义的媒体播放器安博中程在线<divclass="mediaplayer"><divclass="v...
简单显示和控制安博中程在线window.onload = function(){var player = document.getElementById("player");var btn = document.getElementById("...
示例:简单的嵌入音频安博中程在线<audioid="drums"controls><sourcesrc="sounds/ogg/drums.ogg"type="audio/ogg"><sourcesrc="sounds/mp3/drums.mp...
示例:简单的嵌入视频安博中程在线<videocontrols><sourcesrc="video/h264/01_blur.mp4"><sourcesrc="video/theora/01_blur.ogv"><sourcesrc="video...
Apple 的<video> Demo安博中程在线http://www.apple.com/html5/showcase/video/40/45
Apple 的<audio> Demo安博中程在线http://www.apple.com/html5/showcase/audio//41/45
RGraphRGraph 是用JavaScript写的HTML5 图表库,使用HTML5 canvas进行绘制,并且支持超过20种不同的图表类型。在浏览器中使用JavaScript绘制图表, 意味着页面大小更小,速度更快和服务器负载更低。安博中...
RGraph简单易用安博中程在线<scripttype="text/javascript"src="../libraries/RGraph.common.core.js"></script><scripttype="text/javascrip...
扩展阅读安博中程在线RGraph 图表库W3C: HTML Canvas 2D ContextWikipedia: Canvas elementW3C Spec: Audio ElementW3C Spec: Video ElementW3C ...
<Thank you!>Feel free to contact me if you have any question.微博 @范圣刚博客 www.tfan.orggithub github.com/princetoad
Upcoming SlideShare
Loading in …5
×

Multimedia

238 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
238
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Multimedia

  1. 1. HTML5 开发Web,MobileWeb & Apps范圣刚安博中程在线
  2. 2. HTML5 Canvas, Audio & Video图形图像和多媒体
  3. 3. Canvas
  4. 4. 画布Canvascanvas元素的定义:"它是依赖分辨率的位图画布,你可以在canvas上面绘制任意图形,甚至加载照片。"要使用canvas 元素,首先必须设置width 和height 属性,也就是我们可以绘图的区域的大小。安博中程在线<canvaswidth="100"height="100">这里放置后备信息,如果浏览器不支持canvas会显示</canvas>HTML4/45
  5. 5. 2D上下文安博中程在线绘图前需要调用getContext()方法并传入上下文名字,来取得绘图上下文对象的引用。传入"2d"就可以取得2D上下文对象。2D上下文的坐标开始于<canvas>元素的左上角,原点坐标是(0, 0)。x值越大表示越靠右,y值越大表示越靠下。···vardrawing=document.getElementById("canvas-area");//确定浏览器是否支持<canvas>元素if(drawing.getContext){varcontext=drawing.getContext("2d");...}JAVASCRIPT5/45
  6. 6. 填充和描边2D上下文两种基本操作是填充和描边安博中程在线填充,就是用指定的样式(颜色,渐变或者图形)填充图形;描边,就是只在图形的边缘画线。··6/45
  7. 7. fillStyle和strokeStyle填充操作的结果取决于fillStyle 属性,而描边操作的结果取决于strokeStyle 属性。安博中程在线下面的代码将strokeStyle 设置为red(CSS中的颜色名),将fillStyle 设置为#0000ff(蓝色)。两个属性如果不设置的话,默认值都是"#000000"。如果把它们指定为表示颜色的字符串值,可以使用CSS中指定颜色的任何格式,包括颜色名,十六进制码,rgb,rgba等。···vardrawing=document.getElementById("canvas-area");//确定浏览器是否支持<canvas>元素if(drawing.getContext){varcontext=drawing.getContext("2d");context.fillStyle="#0000ff";context.strokeStyle="red";}JAVASCRIPT7/45
  8. 8. 绘制矩形矩形是唯一一种可以直接在2D上下文中绘制的形状。与矩形有关的方法包括:fillRect(), strokeRect()和clearRect()这三个方法都能够接收四个参数:矩形的x坐标,矩形的y坐标,矩形宽度和矩形高度。单位都是像素。安博中程在线varcontext=document.getElementById("canvas-area").getContext("2d");context.fillRect(x,y,width,height);context.strokeRect(x,y,width,height);context.clearRect(x,y,width,height);JAVASCRIPT8/45
  9. 9. fillRect()fillRect() 方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过fillStyle 属性指定。安博中程在线//绘制红色矩形fillrect_context.fillStyle="#ff0000";fillrect_context.fillRect(50,25,200,100);//绘制半透明的蓝色矩形fillrect_context.fillStyle="rgba(0,0,255,0.5)";fillrect_context.fillRect(150,75,200,100);JAVASCRIPT9/45
  10. 10. strokeRect()strokeRect() 方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过strokeStyle 属性指定。安博中程在线//红色描边矩形strokerect_context.strokeStyle="#ff0000";strokerect_context.strokeRect(50,25,200,100);//半透明的蓝色描边矩形strokerect_context.strokeStyle="rgba(0,0,255,0.5)";strokerect_context.strokeRect(150,75,200,100);JAVASCRIPT10/45
  11. 11. clearRect()clearRect() 方法用于清除画布上的矩形区域。通过绘制形状然后再清除指定的区域,就可以生成有意思的效果,比如把某个形状切掉一块。安博中程在线//绘制红色矩形clearrect_context.fillStyle="#ff0000";clearrect_context.fillRect(50,25,200,100);//绘制半透明的蓝色矩形clearrect_context.fillStyle="rgba(0,0,255,0.5)";clearrect_context.fillRect(150,75,200,100);//在两个矩形重叠的区域清除掉一个小矩形clearrect_context.clearRect(170,95,20,20);JAVASCRIPT11/45
  12. 12. 绘制路径2D绘制上下文支持很多在画布上绘制路径的方法,通过路径可以创造出复杂的形状和线条。要绘制路径首先必须调用beginPath() 方法, 表示要开始绘制新路径,然后再调用相应的绘制路径方法。安博中程在线moveTo(x, y): 将绘图游标移动到(x,y), 不画线。lineTo(x, y): 从上一点绘制一条直线,到(x,y)为止。arc(x, y, radius, startAngle, endAngle, counterlockwise): 以(x, y)为圆心绘制一条弧线,弧线半径为radius, 起始和结束的角度分别为startAngle和endAngle。最后一个参数表示startAngle和endAngle是否按逆时针计算,值为false表示按顺时针方向计算。arcTo(x1, y1, x2, y2, radius): 表示从上一点开始绘制弧线,到(x2,y2)为止,并且以给定的半径穿过(x1,y1)。····12/45
  13. 13. 安博中程在线//开始路径pathcanvas_context.beginPath();//绘制外圆pathcanvas_context.arc(100,100,75,0,2*Math.PI,false);//绘制内圆pathcanvas_context.moveTo(170,100);pathcanvas_context.arc(100,100,70,0,2*Math.PI,false);//绘制分针pathcanvas_context.moveTo(100,100);pathcanvas_context.lineTo(100,35);//绘制时针pathcanvas_context.moveTo(100,100);pathcanvas_context.lineTo(55,100);//描边路径pathcanvas_context.stroke();JAVASCRIPT13/45
  14. 14. 安博中程在线 14/45
  15. 15. 绘制文本模拟了在网页中正常显示文本,fillText()方法的三个主要参数:要绘制的字符串,x坐标和y坐标。fillText以下面三个属性为基础:安博中程在线context.font="bold12pxsans-serif";context.textAlign="right";context.textBaseline="bottom";context.fillText("x",248,43);context.fillText("y",58,165);JAVASCRIPTfont: 可以是CSS字体规则中的任何值。textAlign:控制文本的对齐方式(和CSS的text-align不完全相同)。start, end,left, right和center。textBaseline: 控制文本相对于起点的位置。可以取值:top, hanging, middle,alphabetic, ideographic和bottom。···15/45
  16. 16. Canvas绘制一个坐标系安博中程在线 16/45
  17. 17. 变换通过上下文的变化,可以把处理后的图像绘制到画布上。2D绘制上下文支持各种基本的绘制变换。安博中程在线rotate(angle): 围绕原点旋转图像angle角度scale(scaleX, scaleY): 缩放图像,在x方向乘以scaleX, 在y方向乘以scaleY。scaleX和scaleY的默认值都是1.0。translate(x,y): 将坐标原点移动到(x,y)。执行这个变换之后,坐标(0, 0)会变成之前由(x,y)表示的点。···17/45
  18. 18. 变换 - translate在前面绘制秒针的例子中,如果我们把原点变换成表盘的中心,那么再绘制表针就容易多了。安博中程在线context.beginPath();context.arc(100,100,75,0,2*Math.PI,false);context.moveTo(170,100);context.arc(100,100,70,0,2*Math.PI,false);//变换原点context.translate(100,100);context.moveTo(0,0);context.lineTo(0,-65);context.moveTo(0,0);context.lineTo(-40,0);context.stroke();JAVASCRIPT18/45
  19. 19. 变换 - rotate安博中程在线//变换原点context.translate(100,100);//旋转表针context.rotate(1);context.moveTo(0,0);context.lineTo(0,-65);context.moveTo(0,0);context.lineTo(-40,0);context.stroke();JAVASCRIPT19/45
  20. 20. 颜色渐变渐变是两种或者更多颜色的平滑过渡。canvas的绘图上下文支持两种类型的渐变:安博中程在线createLinearGradient(x0, y0, x1, y1)沿着直线从(x0, y0)至(x1, y1)绘制渐变。createRadiaGradient(x0, y0, r0, x1, y1, r1)沿着两个圆之间的锥面绘制渐变。前三个参数代表开始的圆,圆心是(x0, y0),半径是r0; 最后三个参数代表结束的圆。··varmy_gradient=context.createLinearGradient(0,0,500,0);my_gradient.addColorStop(0,"black");my_gradient.addColorStop(1,"white");context.fillStyle=my_gradient;context.fillRect(0,0,500,300);JAVASCRIPT20/45
  21. 21. 线性渐变demo安博中程在线 21/45
  22. 22. Gradient渐变Demo安博中程在线 22/45
  23. 23. 绘制图像使用drawImage()可以把一幅图像绘制到画布上,根据期望的最终结果的不同,drawImage()提供了三种绘制图片的方法:安博中程在线drawImage( image, dx, dy )接受一个图片,并将之画到canvas中。给出的坐标(dx,dy)代表图片的左上角。drawImage( image, dx, dy, dw, dh )接受一个图片,将其缩放为宽度dw,高度dh,然后把它画到canvas上的(dx, dy)位置。并将之画到canvas中。drawImage( image, sx, sy, sw, sh, dx, dy, dw, dh )接受一个图片,通过参数( sx,sy, sw, sh )指定图片的剪裁的范围,缩放到(dw, dh)的大小, 最后把它画到canvas上的(dx, dy)位置。···varandroid=newImage();android.src="images/android.png";android.onload=function(){for(varx=0,y=0;x<800&y<500;x+=50,y+=30){context.drawImage(android,x,y,100,117);}}JAVASCRIPT23/45
  24. 24. 图片demo安博中程在线 24/45
  25. 25. canvas导成图像安博中程在线varimgURI=imagedrawing.toDataURL("image/png");varimage=document.createElement("img");image.src=imgURI;document.getElementById("canvas-images-export").appendChild(image);JAVASCRIPT25/45
  26. 26. <Video> & <Audio>不依赖插件就能嵌入音频和视频内容
  27. 27. 视频容器安博中程在线MPEG-4Flash 视频OggWebM音频视频交错·····27/45
  28. 28. 视频编解码器安博中程在线H.264TheoraVP8···28/45
  29. 29. 音频编解码器安博中程在线MP3AACVP8Vorbis····29/45
  30. 30. MPEG4 编码安博中程在线HandBrake·30/45
  31. 31. Ogg 编码安博中程在线Firefogg·31/45
  32. 32. WebM 编码安博中程在线Firefoggffmpeg··32/45
  33. 33. 基本用法安博中程在线<videoid="myMovie"src="images/sample.m4v"preloadcontrolsautoplay>视频播放器不可用。</video><audioid="myAudio"src="images/song.mp3"></audio>HTML至少要在标签中包含src属性,指向要加载的媒体文件;可以设置width和height属性以指定视频播放器的大小;如果标签中有controls属性,则意味着浏览器应该显示UI控件,以便用户直接操作媒体;用于开始和结束标签之间的任何内容都将作为后备内容,在浏览器不支持这两个媒体元素的情况下显示。·····33/45
  34. 34. 指定不同的媒体来源因为并非所有的浏览器都支持所有的媒体格式,所以可以指定多个不同的媒体来源。像下面这样使用一个或多个<source>元素。安博中程在线<videoid="videoShowcase"width="848"height="352"poster="/images/poster.jpg"autobuffer="autobuf<sourcesrc="/images/demo.m4v"type="video/mp4;codecs="avc1.42E01E,mp4a.40.2""><sourcesrc="/images/demo.webm"type="video/webm;codecs="vp8,vorbis""></video>HTML34/45
  35. 35. 主要属性属性 数值类型 说明autoplay 布尔值 取得或设置autoplay标志controls 布尔值 取得或者设置controls属性,用于隐藏或者显示浏览器内置的控件duration 浮点数 媒体的总播放时间(秒数)ended 布尔值 表示媒体是否播放完成muted 布尔值 取得或设置媒体文件是否静音paused 布尔值 表示播放器是否暂停readyState 布尔值 表示媒体文件是否已经就绪volume 浮点数 取得或设置当前音量安博中程在线 35/45
  36. 36. 自定义媒体播放器使用video和audio的play和pause方法,可以手工控制媒体文件的播放。组合使用属性,事件和这两个方法,很容创建一个自定义的媒体播放器安博中程在线<divclass="mediaplayer"><divclass="video"><videoid="player"src="../images/demo.m4v"poster="mymovie.jpg"width="300"height="200">Videoplayernotavailable.</video></div><divclass="controls"><inputtype="button"value="Play"id="video-btn"><spanid="curtime">0</span>/<spanid="duration">0</div></div>HTML36/45
  37. 37. 简单显示和控制安博中程在线window.onload = function(){var player = document.getElementById("player");var btn = document.getElementById("video-btn");var curtime = document.getElementById("curtime");var duration = document.getElementById("duration");duration.innerHTML = player.duration;EventUtil.addHandler(btn, "click", function(event){if (player.paused){player.play();btn.value = "Pause";} else {player.pause();btn.value = "Play";}});setInterval(function(){curtime.innerHTML = player.currentTime;}, 250);};HTML37/45
  38. 38. 示例:简单的嵌入音频安博中程在线<audioid="drums"controls><sourcesrc="sounds/ogg/drums.ogg"type="audio/ogg"><sourcesrc="sounds/mp3/drums.mp3"type="audio/mpeg"><ahref="sounds/mp3/drums.mp3">下载 drums.mp3</audio>HTML38/45
  39. 39. 示例:简单的嵌入视频安博中程在线<videocontrols><sourcesrc="video/h264/01_blur.mp4"><sourcesrc="video/theora/01_blur.ogv"><sourcesrc="video/webm/01_blur.webm"></video>HTML39/45
  40. 40. Apple 的<video> Demo安博中程在线http://www.apple.com/html5/showcase/video/40/45
  41. 41. Apple 的<audio> Demo安博中程在线http://www.apple.com/html5/showcase/audio//41/45
  42. 42. RGraphRGraph 是用JavaScript写的HTML5 图表库,使用HTML5 canvas进行绘制,并且支持超过20种不同的图表类型。在浏览器中使用JavaScript绘制图表, 意味着页面大小更小,速度更快和服务器负载更低。安博中程在线 42/45
  43. 43. RGraph简单易用安博中程在线<scripttype="text/javascript"src="../libraries/RGraph.common.core.js"></script><scripttype="text/javascript"src="../libraries/RGraph.bar.js"></script>...<canvasid="cvs"width="600"height="250">[Nocanvassupport]</canvas><script>window .onload=function(){varbar=newRGraph.Bar(cvs,[5,4,1,6,8,5,3]);bar .Set(chart.labels,[Monday,Tuesday,Wednesday,Thursdabar .Draw();}</script>JAVASCRIPT43/45
  44. 44. 扩展阅读安博中程在线RGraph 图表库W3C: HTML Canvas 2D ContextWikipedia: Canvas elementW3C Spec: Audio ElementW3C Spec: Video ElementW3C Spec: Media ElementsWhatWG: Timed Track APIMozilla Wiki: Audio Data API········44/45
  45. 45. <Thank you!>Feel free to contact me if you have any question.微博 @范圣刚博客 www.tfan.orggithub github.com/princetoad

×