HTML的笔记及展示（3）（绘图和多媒体支持相关）

实际应用中，我们使用HTML来完成绘图和多媒体相关功能不是很常用，所以只要知道，需要用时查阅使用即可。

一、绘图

<canvas…/>元素只是绘制图形的容器，必须使用JavaScript脚本来绘制图形。

代码示例：

<canvas id="mc" width="300" height="180"
  style="border:1px solid black"></canvas>
<script type="text/javascript">
  //获取canvas元素对应的DOM对象
  var canvas = document.getElementById('mc');
  //获取在canvas上绘图的CanvasRenderingContext2D对象
  var ctx = canvas.getContext('2d');
  //设置填充颜色
  ctx.fillStyle = '#f00';
  //绘制矩形
  ctx.fillRect(30,40,80,100);
</script>

因为<canvas…/>只是一个绘图用的画布，真正负责绘图的是canvas对象的getContext()方法返回的CanvasRenderingContext2D对象。

二、多媒体

1.使用<audio…/>元素播放音频

<h2>音频播放</h2>
<audio src="七月的风八月的雨.mp3" controls></audio>

不支持<audio…/>元素的浏览器会显示这段文本内容。

2.使用<video…/>元素播放视频

<h2>视频播放</h2>
<video src="效果演示.avi" controls></video>

不支持<video…/>元素的浏览器会显示这段文本内容。

在HTML页面上放置了<audio…/>、<video…/>元素后，就相当于在页面添加了一个内置支持的音频、视频播放器。只要指定了controls属性，就会生成播放控制条。

HTML5目前推荐使用OGG Vobis压缩格式。

只在这里指出一些比较常用的元素，其他相关元素就不说了。但是相对来说,这些元素也是比较少的应用的,我们在用到这些元素的时候知道怎么用就好.