HTML5 学习笔记

时间：2015-05-12 20:48:49 阅读：118 评论：0 收藏：0 [点我收藏+]

标签：

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

以代码示例为主。

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 学习笔记

标签：

原文地址：http://www.cnblogs.com/hanyuxinting/p/4498162.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行