<video> 元素元素还提供了 width 和 height 属性来控制视频的尺寸，如果设置了宽度和高度，则所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器并不知道视频的大小，就不能在加载时保留特定的空间，页面则会根据原始视频的大小而改变，这一点需要注意。

　　<video> 元素可以使用 DOM 进行控制。

　　<video> 元素同样拥有方法、属性和事件，可以使用 JS 进行控制。其中的方法有用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知你，比如 <video> 元素开始播放、已暂停，已停止，等等。

　　为视频创建简单的播放/暂停以及调整尺寸的控件：

Video DOM播放/暂停放大缩小正常); playPause(){ (oVideo.paused){ 29 oVideo.play(); { 31 oVideo.pause(); 32 } 33 } showBig(){ ; ; 38 } showSmall(){ ; ; 43 } showNormal(){ ; ; 48 }

 　　上面的例子调用了两个方法：play() 和 pause()，即播放/暂停。

　　它同时还使用了三个属性：paused、width 和 height，在所有属性中，只有 width 和 height 属性是立即可用的，在视频的元数据已加载后，其他属性才可用。

3、HTML5 Canvas

　　<canvas> 元素用于在网页中绘制图形，比如图表和其他图像，但必须使用 JS 来绘制图形。

　　(1)、什么是 Canvas

　　Canvas 翻译为画布，画布是一个矩形区域，可以控制每一像素。

　　HTML5 的 Canvas 元素用于绘制图像，但他仅仅只是图形的容器，必须使用 JavaScript 来绘制图形。

　　getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

　　Canvas 拥有多种绘制路径，矩形、圆形、字符以及添加图像的方法。

 　　(2)、创建 Canvas

　　向页面添加 <canvas> 元素，规定元素的 ID、宽度和高度：

　　注意：<canvas> 元素通常需要指定一个 id 属性，以便 JS 查找元素，width 和 height 属性用于定义的画布的大小。

　　在默认情况下 <canvas> 元素没有边框和内容，可以在页面中创建多个 <canvas> 元素，为了便于图形的绘制，可以使用 style 属性为画布添加边框。

　　(3)、使用 JavaScript 来绘制图形

　　canvas 元素本身是没有绘图能力的，必须使用 JavaScript 来完成实际的绘图任务：

1 <script> 2 var c = document.getElementById('myCanvas'); 3 var cxt = c.getContext("2d"); 4 cxt.fillStyle = "#FF0000"; 5 cxt.fillRect(0,0,150,75); 6 </script>

　　代码解析：

　　首先，JS 通过设置的 ID 属性获取 <canvas> 元素：

var c = document.getElementById("myCanvas");

　　然后，创建 context 对象：

var ctx = c.getContext("2d");

　　getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

　　最后的两行代码用于绘制一个红色背景的矩形：

1 ctx.fillStyle = "#FF0000"; 2 ctx.fillRect(0,0,150,75);

　　fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

　　设置 fillStyle 属性可以是 CSS 颜色，渐变，或图案。fillStyle 默认设置是 #000000（黑色）。

　　fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

　　(4)、理解 Canvas 坐标

　　canvas 是一个二维网格，左上角坐标为 (0,0)。

　　上面代码中的 fillRect 方法拥有参数 (0,0,150,75)，意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

　　如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。

X

Y

 

 

　　鼠标在矩形框内移动，可以显示定位坐标。

 

　　(5)、Canvas 绘制路径

　　下表是 Canvas 绘制路径方法：

方法 说明

moveTo() 把路径移动到画布中的指定点，不创建线条

lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条

stroke() 绘制已定义的路径

arc() 创建弧/曲线（用于创建圆形或部分圆）

arcTo() 创建两切线之间的弧/曲线

beginPath() 起始一条路径，或重置当前路径

closePath() 创建从当前点回到起始点的路径

fill() 填充当前绘图（路径）

quadraticCurveTo() 创建二次贝塞尔曲线

bezierCurveTo() 创建三次方贝塞尔曲线

clip() 从原始画布剪切任意形状和尺寸的区域

isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false

　　贝塞尔曲线，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。

　　在 Canvas 上画线，我们将使用以下两种方法：

　　　　①：moveTo(x,y) 定义线条开始坐标。

　　　　②：lineTo(x,y) 定义线条结束坐标。

　　最后通过 stroke() 方法来绘制当前路径。