HTML5 学习笔记

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

以代码示例为主。

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>

 

 

 

 

 

posted on 2015-05-12 18:20  hanyuxinting  阅读(217)  评论(0)  编辑  收藏  举报

导航