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 } HTML5元素整理
原文地址：https://www.cnblogs.com/CiMing/p/8413633.html