当前位置：首页 > Web开发 > 正文

您可以继续做任何愿意做的事情：点击、选取内容等等

2024-03-31 Web开发

标签：

Html5学习系列 HTML5 规定了一种通过 video 元素来包罗视频的标准要领

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

如需在 HTML5 中显示视频，您所有需要的是：

</video>

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

HTML5 规定了一种通过 audio 元素来包罗音频的标准要领。

audio 元素能够播放声音文件或者音频流。

<audio> 与 </audio> 之间插入的内容是供不撑持 audio 元素的浏览器显示的：

实例

Your browser does not support the audio tag.

</audio>

HTML5 拖放实例

设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

拖动什么 - ondragstart 和 setData()

然后，规定当元素被拖动时，会产生什么。

在上面的例子中，ondragstart 属性挪用了一个函数，drag(event)，它规定了被拖动的数据。

dataTransfer.setData() 要领设置被拖数据的数据类型和值：

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。

放到何处 - ondragover

ondragover 事件规定在何处安排被拖动的数据。

默认地，无法将数据/元素安排到其他元素中。如果需要设置允许安排，我们必需阻止对元素的默认措置惩罚惩罚方法。

这要通过挪用 ondragover 事件的 event.preventDefault() 要领：

event.preventDefault()

进行安排 - ondrop

当安排被拖数据时，会产生 drop 事件。

在上面的例子中，ondrop 属性挪用了一个函数，drop(event)：

function drop(ev)

{

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

代码解释：

挪用 preventDefault() 来制止浏览器对数据的默认措置惩罚惩罚（drop 事件的默认行为是以链接形式打开）

通过 dataTransfer.getData("Text") 要领获得被拖的数据。该要领将返回在 setData() 要领中设置为不异类型的任何数据。

被拖数据是被拖元素的 id ("drag1")

把被拖元素追加到安排元素（方针元素）中

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像创建 Canvas 元素

向 HTML5 页面添加 canvas 元素。

规定元素的 id、宽度和高度：

通过 JavaScript 来绘制

canvas 元素自己是没有绘图能力的。所有的绘制事情必需在 JavaScript 内部完成：

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

</script>

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.moveTo(10,10);

cxt.lineTo(150,50);

cxt.lineTo(10,50);

cxt.stroke();

</script>

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.beginPath();

cxt.arc(70,18,15,0,Math.PI*2,true);

cxt.closePath();

cxt.fill();

</script>

把图片放到画布上

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

var img=new Image()

img.src="flower.png"

cxt.drawImage(img,0,0);

</script>

什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

SVG 用于界说用于网络的基于矢量的图形

SVG 使用 XML 格局界说图形

SVG 图像在放大或转变尺寸的情况下其图形质量不会有损掉

SVG 是万维网联盟的标准

SVG 的优势

与其他图像格局对比（好比 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编纂器来创建和改削

SVG 图像可被搜索、索引、脚本化或压缩

SVG 是可伸缩的

SVG 图像可在任何的辨别率下被高质量地打印

SVG 可在图像质量不下降的情况下被放大

把 SVG 直接嵌入 HTML 页面

在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：

实例

<!DOCTYPE html>

<html>

<body>

<polygon points="100,10 40,180 190,60 10,60 160,180"

</svg>

</body>

</html>

Canvas 与 SVG 的对照

下表列出了 canvas 与 SVG 之间的一些差别之处。

Canvas

依赖辨别率

不撑持事件措置惩罚惩罚器

弱的文本衬着能力

能够以 .png 或 .jpg 格局生存功效图像

最适合图像密集型的游戏，此中的许多东西会被频沉重绘

SVG

不依赖辨别率

撑持事件措置惩罚惩罚器

最适合带有大型衬着区域的应用措施（好比谷歌舆图）

庞大度高会减慢衬着速度（任何过度使用 DOM 的应用都烦闷）

不适合游戏应用

HTML5 - 使用地舆定位

请使用 getCurrentPosition() 要领来获得用户的位置。

下例是一个简单的地舆定位实例，可返回用户位置的经度和纬度。

<!DOCTYPE html>

<html>

<body>

<p>点击这个按钮，获得您的坐标：</p>

var x=document.getElementById("demo");

function getLocation()

{

if (navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(showPosition,showError);

}

else{x.innerHTML="Geolocation is not supported by this browser.";}

}

function showPosition(position)

{

x.innerHTML="Latitude: " + position.coords.latitude +

"<br />Longitude: " + position.coords.longitude;

}

function showError(error)

{

switch(error.code)

{

case error.PERMISSION_DENIED:

x.innerHTML="User denied the request for Geolocation."

break;

case error.POSITION_UNAVAILABLE:

x.innerHTML="Location information is unavailable."

break;

case error.TIMEOUT:

x.innerHTML="The request to get user location timed out."

break;

case error.UNKNOWN_ERROR:

x.innerHTML="An unknown error occurred."

break;

}

</script>

</body>

</html>

在客户端存储数据

HTML5 供给了两种在客户端存储数据的新要领：

localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31370.html

上一篇：建议不要用这个
下一篇： meta charset ="UTF-8" http-equiv ="Content-Type" content ="

您可以继续做任何愿意做的事情：点击、选取内容等等

推荐文章

热门文章

标签

友情链接

关于本站

联系我们

特别鸣谢