HTML5 学习笔记

浏览数：23 / 时间：2015年06月09日

从头整理学习。。然后加练习中。

以代码示例为主。

1. video

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

使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。

要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。

Internet Explorer 8 不支持 video 元素。在 IE 9 中，将提供对使用 MPEG4 的 video 元素的支持。

1 1 <video width="320" height="240" controls="controls">
2 2 <source src="/i/movie.ogg" type="video/ogg">
3 3 <source src="/i/movie.mp4" type="video/mp4">
4 4 Your browser does not support the video tag.
5 5 </video>

方法	属性	事件
play()	currentSrc	play
pause()	currentTime	pause
load()	videoWidth	progress
canPlayType	videoHeight	error
	duration	timeupdate
	ended	ended
	error	abort
	paused	empty
	muted	emptied
	seeking	waiting
	volume	loadedmetadata
	height
	width

在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。

2. audio

很多用法与video一致~

1 <audio controls="controls">
2 <source src="song.ogg" type="audio/ogg">
3 <source src="song.mp3" type="audio/mpeg">
4 Your browser does not support the audio tag.
5 </audio>

3. 拖拽

1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <script type="text/javascript">
5 function allowDrop(ev)
6 {
7 ev.preventDefault();
8 }
9
10 function drag(ev)
11 {
12 ev.dataTransfer.setData("Text",ev.target.id);
13 }
14
15 function drop(ev)
16 {
17 ev.preventDefault();
18 var data=ev.dataTransfer.getData("Text");
19 ev.target.appendChild(document.getElementById(data));
20 }
21 </script>
22 </head>
23 <body>
24
25 <div id="div1" ondrop="drop(event)"
26 ondragover="allowDrop(event)"></div>
27 <img id="drag1" src="img_logo.gif" draggable="true"
28 ondragstart="drag(event)" width="336" height="69" />
29
30 </body>
31 </html>

1）为了使元素可拖动，把 draggable 属性设置为 true

2）拖动什么 - ondragstart 和 setData()

3）放到何处 - ondragover

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

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

4）进行放置 - ondrop

4. Canvas

需要JS辅助绘图。

画圆：

1 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
2 Your browser does not support the canvas element.
3 </canvas>
4
5 <script type="text/javascript">
6
7 var c=document.getElementById("myCanvas");
8 var cxt=c.getContext("2d");
9 cxt.fillStyle="#FF0000";
10 cxt.beginPath();
11 cxt.arc(70,18,18,0,Math.PI*2,true);
12 cxt.closePath();
13 cxt.fill();
14
15 </script>

画线：

1 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
2 Your browser does not support the canvas element.
3 </canvas>
4
5 <script type="text/javascript">
6
7 var c=document.getElementById("myCanvas");
8 var cxt=c.getContext("2d");
9 cxt.moveTo(10,10);
10 cxt.lineTo(150,50);
11 cxt.lineTo(10,50);
12 cxt.stroke();
13
14 </script>

引入图片：

1 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
2 Your browser does not support the canvas element.
3 </canvas>
4
5 <script type="text/javascript">
6
7 var c=document.getElementById("myCanvas");
8 var cxt=c.getContext("2d");
9 var img=new Image()
10 img.src="/i/eg_flower.png"
11 cxt.drawImage(img,0,0);
12
13 </script>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

HTML5 学习笔记