HTML5元素整理
HTML5 Canvas
Canvas元素绘制工作在JS中完成，
首先找到元素：
var c=document.getElementById("myCanvas");
然后创建context对象：
var ctx=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
HTML5 拖放（Drag 和 Drop）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜鸟教程(runoob.com)</title> 6 <style type="text/css"> 7 #div1, #div2 8 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;} 9 </style> 10 <script> 11 function allowDrop(ev) 12 { 13 ev.preventDefault(); 14 } 15 16 function drag(ev) 17 { 18 ev.dataTransfer.setData("Text",ev.target.id); 19 //dataTransfer.setData() 方法设置被拖数据的数据类型和值 20 } 21 22 function drop(ev) 23 { 24 ev.preventDefault();//允许放置 25 var data=ev.dataTransfer.getData("Text"); 26 ev.target.appendChild(document.getElementById(data)); 27 } 28 </script> 29 </head> 30 <body> 31 32 <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> 33 <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"> 34 <!--draggable="true"为了使元素可拖动，把 draggable 属性设置为 true。 35 ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。 36 ondrop进行放置，调用了一个函数，drop(event)。--> 37 <!--拖动什么 - ondragstart 和 setData()； 放到何处 - ondragover； 进行放置 - ondrop--> 38 </div> 39 <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 40 41 </body> 42 </html>
HTML5 Video(视频)Audio(音频)
controls
<video width="320" height="240" controls> <audio controls>
暂停开始
1 function playPause() 2 { 3 if (myVideo.paused) 4 myVideo.play(); 5 else 6 myVideo.pause(); 7 }