HTML5(Canvas Vedio Audio 拖动)

1、Canvas (在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字)

HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

<canvas id="myCanvas" width="" height=""

style="border:1px solid #000000;background:#ddd;">

</canvas>//style属性用来绘制边框

soild 是线框

<canvas id="myCanvas" width="" height=""

style="border:10px dotted #000000;background:#ddd;">

</canvas>//style属性用来绘制边框

dotted是点

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<script type="text/javascript">

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

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

cxt.fillStyle="#FF0000";//以下两行代码创建一个红色矩形，fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

cxt.fillRect(,,,);

</script>

理解坐标

上面的 fillRect 方法拥有参数 (0,0,150,75)。

意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。横轴是X轴纵轴是Y轴

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

实例 - 线条

通过指定从何处开始，在何处结束，来绘制一条线：

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标

然后使用 stroke() 方法来绘制线条:

<script type="text/javascript">

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

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

cxt.moveTo(,);

cxt.lineTo(,);

cxt.lineTo(,);

cxt.stroke();

</script>

实例 - 圆形

通过规定尺寸、颜色和位置，来绘制一个圆：

<script type="text/javascript">

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

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

cxt.fillStyle="#FF0000";

cxt.beginPath();

cxt.arc(,,,,Math.PI*);//arc(x,y,r,start,stop) x,y为圆心坐标，r为半径

cxt.closePath();

cxt.fill();//可以填充颜色
//或者 cxt.stroke(); 但是该方法只会画出线，无法填充颜色

</script>

实例 - 渐变

使用您指定的颜色来绘制渐变背景：

createLinearGradient(x,y,x1,y1) - 创建线条渐变，(x,y)左上角坐标 (x1,y1)右下角坐标
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

<script type="text/javascript">

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

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

var grd=cxt.createLinearGradient(,,,);

grd.addColorStop(,"#FF0000");//0表示开始

grd.addColorStop(,"#00FF00");//1表示结束

cxt.fillStyle=grd;

cxt.fillRect(,,,);

</script>

//先创建cxt中的一个渐变色对象grd，再对grd对象进行填充色赋值，再将grd对象填充给cxt

实例 - 图像

把一幅图像放置到画布上：

drawImage(image,x,y) //(x,y)为左上角坐标

<script type="text/javascript">

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

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

var img=new Image()

img.src="flower.png"

cxt.drawImage(img,,);

</script>

Canvas - 文本

使用 canvas 绘制文本，重要的属性和方法如下：

font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本

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

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

ctx.font="30px Arial";

ctx.fillText("Hello World",,);

2、Video

如需在 HTML5 中显示视频

<video src="movie.ogg" width="320" height="240" controls="controls">

</video>

control 属性供添加播放、暂停和音量控件。

包含宽度和高度属性也是不错的主意。

<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的：

<video width="" height="" controls="controls">

  <source src="/i/movie.ogg" type="video/ogg">

  <source src="/i/movie.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

video标签属性：http://www.w3school.com.cn/tags/tag_video.asp

　　方法事件：http://www.w3school.com.cn/html5/html_5_video_dom.asp

video各种控件

<div style="text-align:center;">

  <button onclick="playPause()">播放/暂停</button>

  <button onclick="makeBig()">大</button>

  <button onclick="makeNormal()">中</button>

  <button onclick="makeSmall()">小</button>

  <br /> //换行  等效于 <br></br>

  <video id="video1" width="" style="margin-top:15px;">

    <source src="/example/html5/mov_bbb.mp4" type="video/mp4" />

    <source src="/example/html5/mov_bbb.ogg" type="video/ogg" />

    Your browser does not support HTML5 video.

  </video>

</div> 

<script type="text/javascript">

var myVideo=document.getElementById("video1");

function playPause()

{

if (myVideo.paused) //属性 如果是暂停状态 返回真

  myVideo.play();

else

  myVideo.pause();

} 

function makeBig()

{

myVideo.width=;

} 

function makeSmall()

{

myVideo.width=;

} 

function makeNormal()

{

myVideo.width=;

}

</script>

3、音频audio（与视频vedio相似）

source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：(vedio也是)

<audio controls="controls">

  <source src="/i/song.ogg" type="audio/ogg">

  <source src="/i/song.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

source属性:http://www.w3school.com.cn/html5/html_5_audio.asp

4、拖放

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

<img draggable="true" />

然后，规定当元素被拖动时，会发生什么。在下面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

数据类型是 "Text"，值是可拖动元素的 id ("drag1")。

放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法

event.preventDefault()//避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）

进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件。

在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

function drop(ev)

{

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");//通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

ev.target.appendChild(document.getElementById(data));//被拖数据是被拖元素的 id ("drag1")把被拖元素追加到放置元素（目标元素）中

}

全部代码

<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript">

function allowDrop(ev)

{

ev.preventDefault();

}

function drag(ev)//使得可拖动(有数据存入从而使拖动有可能实现)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

function drop(ev)

{

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));//使得拖动后的图像可以得到显示(向目标添加一个子物体) 注意没引号

}

</script>

</head>

<body>

<div id="div1" ondrop="drop(event)"

ondragover="allowDrop(event)"></div> //所有有拖放函数的div等元素 都可以存放拖动后的img

<img id="drag1" src="img_logo.gif" draggable="true"

ondragstart="drag(event)" width="" height="" />//使得可拖动(无数据即拖动后无法存储)

</body>

</html>

DataTransfer 对象：退拽对象用来传递的媒介，使用一般为Event.dataTransfer。
draggable 属性：就是标签元素要设置draggable=true，否则不会有效果，例如：
```
<div title="拖拽我" draggable="true">列表1</div>
```
ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
Event.effectAllowed 属性：就是拖拽的效果。

事件顺序:ondragstart — ondrag — ondragenter — ondragover — ondragleave/ondrop — ondragend

1. 若想触发ondrop事件，ondragover 中需要阻止默认事件（元素默认是不允许放置的）。

2. 在Firefox 3.5+中，如果是把图像拖放到放置目标上，页面就会转向图像文件；而如果是把文本拖放到放置目标上，则会导致无效URL错误，因此，为了让Firefox支持正常的拖放，还要取消drop事件的默认行为，阻止它打开URL

setData(key,value)	两个参数都是字符串类型
getData(key)	getData()可以取得由setData()保存的值
effectAllowed	设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized) ；事件 ondragstart中设置
setDragImage(element, x, y)	指定一副图像，当拖动发生时，显示在光标下方。这个方法接受的三个参数分别是要显示的HTML元素和光标在图像中的x、y坐标。其中，HTML元素（可以是隐藏的元素）可以是一副图像，也可以是其它元素。是图像则显示图像，是其它元素则显示渲染后的元素。实现这个方法的浏览器有Firefox 3.5+、Safari 4+ 和 Chorme
files	获取外部拖拽文件的一个类似数组的集合（length）。集合中每个元素有type属性，依次判断拖拽的文件类型。实现这个属性的浏览器有IE10+、Firefox 3.5+和Chrome。

注：只能在拖放事件的事件处理程序中访问dataTransfer对象。

保存在dataTransfer对象中的数据只能在【目标元素】事件处理程序中读取。

关于FileReader（读取文件信息）

readAsDataURL	参数为要读取的文件对象，将文件读取为DataUrl
onLoad	读取成功完成时触发此事件，this.result 获取读取的文件数据，如果是图片，将返回base64格式的图片数据

5、

6、

7、

8、

9、

10、