Multimedia
0 likes311 views
该文档介绍了 HTML5 中使用 <canvas> 元素进行绘图的基本概念和方法，包括如何创建 2D 上下文、绘制形状、文本、路径、变换和渐变效果。文档还详细阐述了如何嵌入音频和视频内容，提供了各类示例代码和属性说明，帮助开发者掌握 HTML5 多媒体应用的实现。最后提到 RGraph 库实现图表绘制，支持 20 种以上不同图表类型。
![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','Thursda
bar .Draw();
}
</script>
JAVASCRIPT
43/45](https://image.slidesharecdn.com/multimedia-130529210034-phpapp01/85/Multimedia-43-320.jpg)
Multimedia
- 1. HTML5 开发 Web,MobileWeb & Apps 范圣刚 安博中程在线
- 2. HTML5 Canvas, Audio & Video 图形图像和多媒体
- 3. Canvas
- 4. 画布 Canvas canvas元素的定义："它是依赖分辨率的位图画布，你可以在canvas上面绘制任意图 形，甚至加载照片。" 要使用canvas 元素，首先必须设置width 和height 属性，也就是我们可以绘图的区域 的大小。 安博中程在线 <canvaswidth="100"height="100">这里放置后备信息，如果浏览器不支持canvas会显示</canvas>HTML 4/45
- 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"; } JAVASCRIPT 7/45
- 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
- 14. 安博中程在线 14/45
- 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); JAVASCRIPT font: 可以是CSS字体规则中的任何值。 textAlign：控制文本的对齐方式（和CSS的text-align不完全相同）。start, end, left, right和center。 textBaseline: 控制文本相对于起点的位置。可以取值：top, hanging, middle, alphabetic, ideographic和bottom。 · · · 15/45
- 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
- 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); JAVASCRIPT 20/45
- 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); } } JAVASCRIPT 23/45
- 35. 主要属性 属性 数值类型 说明 autoplay 布尔值 取得或设置autoplay标志 controls 布尔值 取得或者设置controls属性，用于隐藏或者显示浏览器内置的控件 duration 浮点数 媒体的总播放时间（秒数） ended 布尔值 表示媒体是否播放完成 muted 布尔值 取得或设置媒体文件是否静音 paused 布尔值 表示播放器是否暂停 readyState 布尔值 表示媒体文件是否已经就绪 volume 浮点数 取得或设置当前音量 安博中程在线 35/45
- 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); }; HTML 37/45
- 42. RGraph RGraph 是用JavaScript写的HTML5 图表库，使用HTML5 canvas进行绘制，并且支持 超过20种不同的图表类型。 在浏览器中使用JavaScript绘制图表, 意味着页面大小更小，速度更快和服务器负载更 低。 安博中程在线 42/45
- 44. 扩展阅读 安博中程在线 RGraph 图表库 W3C: HTML Canvas 2D Context Wikipedia: Canvas element W3C Spec: Audio Element W3C Spec: Video Element W3C Spec: Media Elements WhatWG: Timed Track API Mozilla Wiki: Audio Data API · · · · · · · · 44/45
- 45. <Thank you!> Feel free to contact me if you have any question. 微博 @范圣刚 博客 www.tfan.org github github.com/princetoad