你用过哪些 HTML 5 标签？_都用过或知道哪些h5标签-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44932552/article/details/107740967

本文详细介绍了HTML5中的Canvas和Audio元素，包括如何使用Canvas进行绘图，如矩形绘制、路径绘制、颜色设置等，以及Audio元素的属性和方法，如autoplay、controls、loop等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

选自MDN自己理解的部分内容
CanvasMDN
1.audio标签：
HTML 元素用于在文档中嵌入音频内容。 audio元素可以包含一个或多个音频资源。

<audio controls  autoplay loop   src="/media/examples/t-rex-roar.mp3">
         Your browser does not support the
     </audio>

controls:如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。
src:嵌入的音频的URL。该URL应遵从 HTTP access controls. 这是一个可选属性；你可以在audio元素中使用元素来替代该属性指定嵌入的音频。
loop:布尔属性；如果声明该属性，将循环播放音频。
autoplay:布尔值属性；声明该属性，音频会尽快自动播放，不会等待整个音频文件下载完成。
注意：自动播放音频（或有声视频）可能会破坏用户体验，所以应该尽可能避免。
使用说明:
浏览器对文件类型和音频编码的支持各有不同，你可以使用内嵌的 source 元素提供不同的播放源。浏览器会使用第一个它支持的播放源：

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg">
  <source src="myAudio.ogg" type="audio/ogg">
</audio>

2.canvas:
canvas标签只有两个属性—— width和height。这些都是可选的，并且同样利用 DOM properties 来设置。当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。

<canvas id="tutorial" width="150" height="150"></canvas>

渲染上下文（The rendering context）
canvas元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。
canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。canvas元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

代码的第一行通过使用 document.getElementById() 方法来为元素得到DOM对象。一旦有了元素对象，你可以通过使用它的getContext() 方法来访问绘画上下文。
检查支持性
替换内容是用于在不支持标签的浏览器中展示的。通过简单的测试getContext()方法的存在，脚本可以检查编程支持性。上面的代码片段现在变成了这个样子：

var canvas = document.getElementById('tutorial');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

上面的脚本中包含一个叫做draw()的函数，当页面加载结束的时候就会执行这个函数。
模板看起来会是这样。如这里所示，它最初是空白的。
在这里插入图片描述
绘制矩形
canvas 只支持两种形式的图形绘制：矩形和路径（由一系列点连成的线段）。所有其他类型的图形都是通过一条或者多条路径组合而成的。
canvas提供了三种方法绘制矩形：
fillRect(x, y, width, height)
绘制一个填充的矩形
strokeRect(x, y, width, height)
绘制一个矩形的边框
clearRect(x, y, width, height)
清除指定矩形区域，让清除部分完全透明。
上面提供的方法之中每一个都包含了相同的参数。x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸。

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}

在这里插入图片描述
fillRect()函数绘制了一个边长为100px的黑色正方形。clearRect()函数从正方形的中心开始擦除了一个6060px的正方形，接着strokeRect()在清除区域内生成一个5050的正方形边框。

绘制路径

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。

首先，你需要创建路径起始点。
然后你使用画图命令去画出路径。
之后你把路径封闭。
一旦路径生成，你就能通过描边或填充路径区域来渲染图形。
以下是所要用到的函数：
beginPath()
新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
closePath()
闭合路径之后图形绘制命令又重新指向到上下文中，该方法不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。
注意：当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。
stroke()
通过线条来绘制图形轮廓。
fill()
通过填充路径的内容区域生成实心的图形。
绘制一个三角形

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
  var ctx = canvas.getContext('2d');

  // 填充三角形
  ctx.beginPath();
  ctx.moveTo(25, 25);
  ctx.lineTo(105, 25);
  ctx.lineTo(25, 105);
  ctx.fill();

  // 描边三角形
  ctx.beginPath();
  ctx.moveTo(125, 125);
  ctx.lineTo(125, 45);
  ctx.lineTo(45, 125);
  ctx.closePath();
  ctx.stroke();
  }
}

在这里插入图片描述

moveTo(x, y)
将笔触移动到指定的坐标x以及y上，简单来说就是从一个点到另一个点的移动过程。
**当canvas初始化或者beginPath()调用后，你通常会使用moveTo()函数设置起点。（主要用法）**我们也能够使用moveTo()绘制一些不连续的路径。
lineTo(x, y)
绘制一条从当前位置到指定x以及y位置的直线。该方法有两个参数：x以及y ，代表坐标系中直线结束的点，开始点和之前的绘制路径有关，之前路径的结束点就是接下来的开始点等等。开始点也可以通过moveTo()函数改变。

正如上面所提到的，因为路径使用填充（fill）时，路径自动闭合，使用描边（stroke）则不会闭合路径。如果没有添加闭合路径closePath()到描述三角形函数中，则只绘制了两条线段，并不是一个完整的三角形。
arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。
ps：Math.PI代表的弧度是Π，180，Math.PI*2代表的是360

色彩 Colors

如果我们想要给图形上色，有两个重要的属性可以做到：fillStyle 和 strokeStyle。

fillStyle = color
设置图形的填充颜色。color 可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象。
输入的应该是符合 CSS3 颜色值标准的有效字符串。下面的例子都表示同一种颜色。
// 这些 fillStyle 的值均为 ‘橙色’
ctx.fillStyle = “orange”;
ctx.fillStyle = “#FFA500”;
ctx.fillStyle = “rgb(255,165,0)”;
ctx.fillStyle = “rgba(255,165,0,1)”;

strokeStyle = color
设置图形轮廓的颜色。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);

Document.getElementById() 方法获取HTML 元素的引用。接着，HTMLCanvasElement.getContext() 方法获取这个元素的context——图像稍后将在此被渲染。

由 CanvasRenderingContext2D 接口完成实际的绘制。fillStyle 属性让长方形变成绿色。fillRect() 方法将它的左上角放在(10, 10)，把它的大小设置成宽150高100。.