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>
View Code
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 }
转载于:https://www.cnblogs.com/CiMing/p/8413633.html
