html5的svg功能介绍（HTML5基础知识2初识canvas）

逗爷 2022-12-16 01:52:59 986

html5的svg功能介绍（HTML5基础知识2初识canvas）</script>cxt.fillRect(0 0 150 75);//fillRect 方法规定了形状、位置和尺寸var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");返回一个用于在画布上绘图的环境，目前仅支持2d，cxt.fillStyle="#FF0000";//染成红色

本节主要简单讲解canvas、svg、地理定位和新语义元素

html5的svg功能介绍（HTML5基础知识2初识canvas）(1)

HTML 5 Canvas

canvas 元素用于在网页上绘制图形。HTML5 的 canvas 元素使JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

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

var cxt=c.getContext("2d");返回一个用于在画布上绘图的环境，目前仅支持2d，

cxt.fillStyle="#FF0000";//染成红色

cxt.fillRect(0 0 150 75);//fillRect 方法规定了形状、位置和尺寸

</script>

fillRect 方法拥有参数 (0 0 150 75)在画布上绘制 150x75 的矩形，从左上角开始 (0 0)

下面是一些常用的Canvas方法：

fillRect(x y width height)绘制一个填充的矩形

Your browser does not support the canvas element.

</canvas>

js代码

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>

（2）通过规定尺寸、颜色和位置，来绘制一个圆：

html5的svg功能介绍（HTML5基础知识2初识canvas）(2)

Your browser does not support the canvas element.

</canvas>

Js代码：

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);//arc为绘制圆形

cxt.closePath();//关闭路径

cxt.fill();//填充颜色

</script>

（3）渐变使用您指定的颜色来绘制渐变背景：

html5的svg功能介绍（HTML5基础知识2初识canvas）(3)

Your browser does not support the canvas element.

</canvas>

Js代码：

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

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

var grd=cxt.createLinearGradient(0 0 175 50);

grd.addColorStop(0 "#FF0000");

grd.addColorStop(1 "#00FF00");

cxt.fillStyle=grd;

cxt.fillRect(0 0 175 50);

</script>

（4）图像把一幅图像放置到画布上：

html5的svg功能介绍（HTML5基础知识2初识canvas）(4)

Your browser does not support the canvas element.

</canvas>

Js代码：

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

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

var img=new Image()

img.src="https://img.aigexing.comflower.png"

cxt.drawImage(img 0 0);

</script>

见识到canvas的厉害了吧，不着急，我下一步写个canvas的详细教程！

HTML5 内联 SVG

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

SVG 用于定义用于网络的基于矢量的图形

SVG 使用 XML 格式定义图形

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

SVG 是万维网联盟的标准

SVG 的优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改

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

SVG 是可伸缩的

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

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

简单例子：把 SVG 直接嵌入 HTML 页面

<svgxmlns="http://www.w3.org/2000/svg"version="1.1"height="190"><polygonpoints="100 10 40 180 190 60 10 60 160 180"style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"></svg>

由于svg知识点比较多，所以在此只需要了解，后续会有详细的教程！

HTML5 地理定位

HTML5 Geolocation（地理定位）用于定位用户的位置。

getCurrentposition() 方法来获得用户的位置。

getCurrentPosition() 方法 - 返回数据

属性	描述
coords.latitude	十进制数的纬度
coords.longitude	十进制数的经度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米计
coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，从正北开始以度计
coords.speed	速度，以米/每秒计
timestamp	响应的日期/时间

例：

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

function getLocation()

{

if (navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(showPosition);//如果支持运行该函数

}

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

}//检测是否支持地理定位

function showPosition(position)

{

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

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

}//coords.latitude十进制的维度 coords.longitude十进制的经度

</script>

（此案例运行时候并没有成功，大家可以试试！）

根据经纬度数据在谷歌地图中显示位置：

function showPosition(position)

{

var latlon=position.coords.latitude " " position.coords.longitude;

var img_url="http://maps.googleapis.com/maps/api/staticmap?center="

latlon "&zoom=14&size=400x300&sensor=false";

document.getElementById("mapholder").innerHTML="<img src='" img_url "'>";

}

HTML5 语义元素

语义元素即有意义的元素一个语义元素能够清楚的描述其意义给浏览器和开发者。例如：

无语义元素实例: <div> 和 <span>无需考虑内容。

语义元素实例: <form> <table> and <img> - 清楚的定义了它的内容.

HTML5中新的语义元素

<header> 描述了文档的头部区域，可以多个

<nav> 标签定义导航链接的部分

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

<article> 标签定义独立的内容。

<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）内容应与主区域的内容相关.

<figcaption>标签定义 <figure> 元素的标题

<figure>规定独立的流内容（图像、图表、照片、代码等等）

<footer>文档的底部区域.含文档的作者，著作权信息，链接的使用条款，联系信息等

html5的svg功能介绍（HTML5基础知识2初识canvas）(5)

HTML5 <figure> 和 <figcaption> 元素实例：

<figure><imgsrc="https://img.aigexing.comimg_pulpit.jpg"alt="The Pulpit Rock"width="304"height="228"><figcaption>Fig1. - The Pulpit Pock Norway.</figcaption></figure>

IE8 及更早IE版本无法在这些元素中渲染CSS效果，以至于你不能使用 <header> <section> <footer> <aside> <nav> <article> <figure> 或者其他的HTML5 elements.

解决办法: 你可以使用HTML5 Shiv Javascript脚本来解决IE的兼容问题。HTML5 Shiv下载地址：http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js，使用方法：

<!--[if lt IE 9]>

<![endif]-->

（虽然这部分比之前更加人性化，但是仍然觉得是个鸡肋，感觉纯属为了创新而创新！）

html5的svg功能介绍（HTML5基础知识2初识canvas）(6)

HTML 5 Web 存储

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：

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

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

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

localStorage 方法

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

document.write(localStorage.lastname);

</script>

例子：

// 检测浏览器是否支持

if (typeof(Storage) !== "undefined") {

localStorage.setItem("lastname" "Gates");

document.getElementById("result").innerHTML = localStorage.getItem("lastname");

} else {

document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";

}

</script>

下面的代码可以统计当前页面累计访问次数：

if (localStorage.pagecount)

{

localStorage.pagecount=Number(localStorage.pagecount) 1;

}

else

{

localStorage.pagecount=1;

}

document.write("Visits: " localStorage.pagecount " time(s).");

sessionStorage 方法

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

document.write(sessionStorage.lastname);

</script>

html5的svg功能介绍（HTML5基础知识2初识canvas）(7)

网站首页

返回栏目

html5的svg功能介绍（HTML5基础知识2初识canvas）

猜您喜欢：

相关文章