本文最后更新于：December 3, 2021 pm

HTML5规范于2014年10月29日由万维网联盟正式宣布，HTML是万维网最核心的超文本标记语言。万维网不等同于互联网，但它是依靠互联网运行的服务之一，万维网又简写为www，它可以实现在互联网的帮助下，访问由许多互相链接的超文本组成的系统。现代的浏览器都支持 HTML5。

<canvas>元素是HTML5中的新元素，通过使用该元素，你可以在网页中绘制所需的图形。标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。通过脚本 (通常是JavaScript)来完成。标签只是图形容器，您必须使用脚本来绘制图形。可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。可以在HTML页面中使用多个 <canvas> 元素.

1.1 创建一个画布

一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制。默认情况下 <canvas> 元素没有边框和内容。

简单使用实例：

1	`<canvas id="myCanvas" width="200" height="100"></canvas>`

标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小。

使用style属性来添加边框：

1
2
3

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

1.2 使用JavaScript来绘制图像

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

简单使用实例：

<script>
var c=document.getElementById("myCanvas"); <!--第一步-->
var ctx=c.getContext("2d"); <!--第二步-->
ctx.fillStyle="#FF0000"; <!--第三步-->
ctx.fillRect(0,0,150,75); <!--第四步-->
</script>

代码解析

1.第一步为找到canvas元素。

2.第二步创建context对象。
getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

3.第三步和第四步是绘制一个红色的矩形。
设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle默认设置是#000000（黑色）。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

1.3 canvas坐标

canvas 是一个二维网格。canvas 的左上角坐标为 (0,0)。
上面1.2中的 fillRect 方法拥有参数 (0,0,150,75)。意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

1.4 canvas路径

在Canvas上画线，我们将使用以下两种方法：

moveTo(x,y) 定义线条开始坐标。

lineTo(x,y) 定义线条结束坐标。

绘制线条我们必须使用到 “ink” 的方法，就像stroke()。

使用实例：定义开始坐标(0,0), 和结束坐标 (200,100). 然后使用 stroke() 方法来绘制线条。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

在canvas中绘制圆形，可以这样用：

arc(x,y,r,start,stop)

实际上我们在绘制圆形时使用了 “ink” 的方法, 比如 stroke() 或者 fill()。

使用实例：使用 arc() 方法绘制一个圆.var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

1.5 canvas文本

使用 canvas 绘制文本，重要的属性和方法如下：

font：定义字体

fillText(text,x,y) ：在 canvas 上绘制实心的文本

strokeText(text,x,y)：在 canvas 上绘制空心的文本

1.5.1 使用fillText()

使用实例：使用 “Arial” 字体在画布上绘制一个高 30px 的文字（实心）：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

1.5.2 使用strokeText()

使用实例：使用 “Arial” 字体在画布上绘制一个高 30px 的文字（空心）：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

1.6 canvas渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
有两种不同的方式来设置Canvas渐变：

createLinearGradient(x,y,x1,y1) ：创建线条渐变

createRadialGradient(x,y,r,x1,y1,r1) ：创建一个径向/圆渐变

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1。
使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。

1.6.1 使用 createLinearGradient()

使用实例：创建一个线性渐变。使用渐变填充矩形:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

1.6.2 使用 createRadialGradient()

使用实例：创建一个径向/圆渐变。使用渐变填充矩形：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

注意：当使用<canvas>元素创建径向渐变的时候 context.createRadialGradient(x , y , r , x1 , y1 , r1) 括号内的参数有如下的含义:

x：表示渐变的开始圆的 x 坐标

y：表示渐变的开始圆的 y 坐标

r：表示开始圆的半径

x1：表示渐变的结束圆的 x 坐标

y1：表示渐变的结束圆的 y 坐标

r1：表示结束圆的半径

1.7 canvas图像

把一幅图像放置到画布上, 使用方法drawImage(image,x,y)。
使用实例：把一幅图像放置到画布上:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

2.内联SVG

SVG表示可缩放矢量图形，是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式，它在2003年1月14日成为W3C推荐标准。

2.1 什么是SVG

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)，用于定义用于网络的基于矢量的图形，使用 XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失，是万维网联盟的标准，SVG 与 DOM 和 XSL 之类的 W3C 标准是一个整体。

2.2 SVG优势

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

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

2.3 SVG直接嵌入HTML页面

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

使用实例：

<!DOCTYPE html>
<html>
<body>
<svg xmlns="https://tothefor.com/" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>

2.4 SVG与canvas的区别

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

两者的比较

Canvas

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

3.MathML

MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。

MathML 与 HTML相似度很高，但是比较繁琐。它继承了角括号和双标签（<标签>内容</标签>）的用法。
HTML5 可以在文档中使用 MathML 元素，对应的标签是 <math>…</math> 。

使用实例1：

<!DOCTYPE html><html>
   <head>
      <meta charset="UTF-8">
      <title>W3Cschool在线教程(w3cschool.cn)</title>
   </head>
   <body>
      <math xmlns="">
         <mrow>
            <msup><mi>a</mi><mn>2</mn></msup>
            <mo>+</mo>
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo>=</mo>
            <msup><mi>c</mi><mn>2</mn></msup>
         </mrow>

      </math>
   </body>
</html>

运行结果：
a²+b²=c²

使用实例2：

<!DOCTYPE html><html>
   <head>
      <meta charset="UTF-8">
      <title>W3Cschool在线教程(w3cschool.cn)</title>
   </head>
   <body>
      <math xmlns="">
         <mrow>			
            <mrow>
               <msup>
                  <mi>x</mi>
                  <mn>2</mn>
               </msup>
               <mo>+</mo>
               <mrow>
                  <mn>4</mn>
                  <mo>⁢</mo>
                  <mi>x</mi>
               </mrow>
               <mo>+</mo>
               <mn>4</mn>
            </mrow>
            <mo>=</mo>
            <mn>0</mn>
         </mrow>
      </math>
   </body></html>

运行结果：
x²+4x+4=0

使用实例3：

<!DOCTYPE html><html>
   <head>
      <meta charset="UTF-8">
      <title>W3Cschool在线教程(w3cschool.cn)</title>
   </head>
   <body>
      <math xmlns="">
         <mrow>
            <mi>A</mi>
            <mo>=</mo>
			
            <mfenced open="[" close="]">
			
               <mtable>
                  <mtr>
                     <mtd><mi>x</mi></mtd>
                     <mtd><mi>y</mi></mtd>
                  </mtr>
					
                  <mtr>
                     <mtd><mi>z</mi></mtd>
                     <mtd><mi>w</mi></mtd>
                  </mtr>
               </mtable>
               
            </mfenced>
         </mrow>
      </math>
   </body></html>

实例是一个 2×2 矩阵，可以在 Firefox 3.5 以上版本查看到效果。

4.拖放（Drag和Drop）

拖放的目的是可以让你将某个对象放置到你想要放置的位置。拖放（Drag 和 drop）是 HTML5 标准的组成部分。

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

使用实例：

<!DOCTYPE HTML>
<html>
<head>
<script>
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>

<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>

看上去也许有些复杂，不过我们可以分别研究拖放事件的不同部分。

4.1 设置元素为可拖放（draggable）

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

1	`<img draggable="true">`

4.2 拖动什么（ondragstart和setData()）

规定当元素被拖动时，会发生什么。在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

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

1
2
3

function drag(ev)        {
ev.dataTransfer.setData("Text",ev.target.id);       
}

数据类型是 “Text”，值是可拖动元素的 id (“drag1”)。

4.3 放到何处（ondragover）

规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
需要通过调用 ondragover 事件的 event.preventDefault() 方法：

1	`event.preventDefault()`

4.4 进行放置（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”)。
把被拖元素追加到放置元素（目标元素）中。

5.地理位置（Geolocation）

HTML5 Geolocation（地理定位）用于定位用户的位置。Geolocation 通过请求一个位置信息，用户同意后，浏览器会返回一个包含经度和维度的位置信息！HTML5 Geolocation API 用于获得用户的地理位置。该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

5.1 使用地理定位

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

使用实例：可返回用户位置的经度和纬度:

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
  }
</script>

代码解析：

检测是否支持地理定位
如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
showPosition() 函数获得并显示经度和纬度

上面的例子是一个非常基础的地理定位脚本，不含错误处理。

提示：geolocation的位置信息来源可以包括GPS、IP地址、RFID、WIFI和蓝牙的MAC地址、以及GSM/CDMS的ID等等。

5.2 处理错误和拒绝

getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数。

使用实例：

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="用户拒绝对获取地理位置的请求。"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="位置信息是不可用的。"
      break;
    case error.TIMEOUT:
      x.innerHTML="请求用户地理位置超时。"
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="未知错误。"
      break;
    }
  }

解析：

Permission denied ：用户不允许地理定位
Position unavailable ：无法获取当前位置
Timeout ：操作超时

5.3 在地图中显示结果

如需在地图中显示结果，您需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图。

使用实例：

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+"'>";
}

在上例中，我们使用返回的经纬度数据在谷歌地图中显示位置（使用静态图像）。

5.4 返回数据（getCurrentPosition() ）

T若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。

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

5.5 其他方法（Geolocation 对象）

watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。

clearWatch() - 停止 watchPosition() 方法。
展示使用watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例（比如 iPhone）：

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="纬度: " + position.coords.latitude +
  "<br>经度: " + position.coords.longitude;
  }
</script>

WEB前端

本文作者: 墨水记忆
本文链接: https://tothefor.com/DragonOne/2815542849.html
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

WEB前端-HTML5基础知识复习（三） Previous

WEB前端-HTML5基础知识复习（一） Next

WEB前端-HTML5基础知识复习（二）

目录

1.<canvas>元素

1.1 创建一个画布

1.2 使用JavaScript来绘制图像

1.3 canvas坐标

1.4 canvas路径

1.5 canvas文本

1.5.1 使用fillText()

1.5.2 使用strokeText()

1.6 canvas渐变

1.6.1 使用 createLinearGradient()

1.6.2 使用 createRadialGradient()

1.7 canvas图像

2.内联SVG

2.1 什么是SVG

2.2 SVG优势

2.3 SVG直接嵌入HTML页面

2.4 SVG与canvas的区别

3.MathML

4.拖放（Drag和Drop）

4.1 设置元素为可拖放（draggable）

4.2 拖动什么（ondragstart和setData()）

4.3 放到何处（ondragover）

4.4 进行放置（ondrop）

5.地理位置（Geolocation）

5.1 使用地理定位

5.2 处理错误和拒绝

5.3 在地图中显示结果

5.4 返回数据（getCurrentPosition() ）

5.5 其他方法（Geolocation 对象）