HTML5新特性 学习笔记1

无内鬼,搞点HTML5

今晚没看完,明天继续


H5音频

HTML5提供了播放音频文件的标准,control属性供添加播放,暂停和音量控件。

<audio>定义声音,<source>规定多媒体资源,可以是多个

使用src属性为audio标签提供资源,controls=“controls”提供控制控件

注意audio是双标签,中间的内容可以是“浏览器不支持”之类的话,代表浏览器无法解析这个标签,如果浏览器可以解析audio标签,则在页面里显示播放器。

有些浏览器对mp3等格式支持不是很好,可以这样解决:

1
2
3
4
<audio>
<source src="1.mp3">
<source src="1.ogg">
</audio>

使用source标签提供资源。

H5视频

以前的时候,在浏览器中播放视频需要借助flash插件,现在随着flash慢慢淡出舞台,H5视频应运而生。flash插件播放视频有诸多不便,H5播放视频就可以解决这些问题。

<video>定义视频,<source>规定多媒体资源,可以是多个,有两个属性,width和height定义宽高。

1
2
3
4
<video controls="controls" height="300px" width="500px">
<source src="1.mp4">
<source src="1.webm">
</video>

H5拖放

拖放是一种常见的特性,即抓取对象以后拖到另一个位置。IE9以上,火狐,Opera12以上,Chrome以及Safari5以上支持拖放。

使用draggable="true"设置元素为可拖放,使用ondragstartsetData()设置拖动什么,使用ondragover设置放到何处,使用ondrop进行放置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>fuck</title>
<style type="text/css">
#div1 {
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault(); // 阻止浏览器的默认事件
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id); // 定位控制元素
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));// 放置
}
</script>
</head>
<body>
<p>请拖动图片</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img src="img/11.png" id="d1" draggable="true" ondragstart="drag(event)">
</body>
</html>

H5 canvas

画布是一个矩形区域,可以控制它的每一个像素。

canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。但注意,canvas只是画布,不是画笔,只用于承载画面。

需要画笔操作的话,使用js控制。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
</head>
<body>
<canvas id="can" width="400px" height="400px"></canvas>
<script type="text/javascript">
var c = document.getElementById("can");
var cxt = c.getContext("2d"); // 确定以2D方式绘制
cxt.fillStyle = "#0000FF"; // 确定绘制颜色
cxt.fillRect(0,0,100,100); // 绘制一个矩形

cxt.beginPath(); //绘制圆使用,路径开始
cxt.arc(200,20,15,0,Math.PI*2,true); // 绘制圆
cxt.closePath(); // 记得再关闭路径
cxt.fill(); // 绘制图形输出到屏幕

var img = new Image(); // 绘制图片的变量初始化
img.onload = function() { // 当图片加载完毕时才绘制
cxt.drawImage(img,200,200); // 绘制图像
}
img.src = "img/right.png"; // 图片资源位置
</script>
</body>
</html>

-------------本文结束,感谢您的阅读转载请注明原作者及出处-------------


本文标题:HTML5新特性 学习笔记1

文章作者:Shawn Zhou

发布时间:2020年01月13日 - 21:01

最后更新:2020年01月13日 - 22:01

原始链接:http://shawnzhou.xyz/2020/01/13/20-01-13-01/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

知识无价,码字不易。对您有用,敬请打赏。金额随意,感谢关心。
0%