html5网络课程

HTML5 网络课程

HTML5 基础语法

字符编码

• 推荐使用 <meta charset="UTF-8"> 来指定字符编码为 UTF-8，确保页面能正确显示各种字符。

结构元素

• <header>：定义文档或节的页眉。
• <nav>：定义导航链接的部分。
• <section>：定义文档中的节，如章节、段落等。
• <article>：定义独立的文章内容。
• <footer>：定义文档或节的页脚。

HTML5 多媒体支持

属性

• controls：显示播放控件，如播放、暂停、音量调节等。
• autoplay：自动播放媒体。
• loop：循环播放媒体。
• muted：静音播放。

事件

• ended：媒体播放结束时触发。
• timeupdate：媒体播放进度改变时触发。

HTML5 Canvas 绘图

渐变

• 线性渐变：通过 createLinearGradient(x0, y0, x1, y1) 创建线性渐变对象，然后使用 addColorStop(position, color) 添加颜色停止点。

  const gradient = ctx.createLinearGradient(0, 0, 200, 0);
  gradient.addColorStop(0, 'red');
  gradient.addColorStop(1, 'blue');
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, 200, 100);

• 径向渐变：通过 createRadialGradient(x0, y0, r0, x1, y1, r1) 创建径向渐变对象，使用方法与线性渐变类似。

图案填充

• 通过 createPattern(image, repetition) 创建图案填充对象，image 是一个 <image> 元素或已加载的图像对象，repetition 表示平铺方式，如 'repeat'。

  const img = new Image();
  img.src = 'pattern.png';
  img.onload = function() {
  const pattern = ctx.createPattern(img, 'repeat');
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 200, 100);
  };

阴影效果

• 阴影颜色：通过 shadowColor 属性设置阴影颜色，如 shadowColor = 'rgba(0, 0, 0, 0.5)'。
• 阴影偏移量：通过 shadowOffsetX 和 shadowOffsetY 属性设置阴影在 x 轴和 y 轴方向的偏移量，单位为像素。shadowOffsetX = 5 表示阴影向右偏移 5 像素，shadowOffsetY = 5 表示阴影向下偏移 5 像素。
• 阴影模糊半径：通过 shadowBlur 属性设置阴影的模糊半径，值越大阴影越模糊。shadowBlur = 10。

保存与恢复状态

• 保存状态：通过 save() 方法保存当前的绘图状态，包括当前的绘图上下文属性（如颜色、线宽、字体等）、变换矩阵、裁剪区域等，可以将当前状态压入一个栈中，以便后续恢复，在进行一些复杂的绘图操作之前，先调用 save() 方法保存当前状态，以便在操作完成后可以恢复到之前的状态。
• 恢复状态：通过 restore() 方法从栈中弹出最近保存的状态，并将绘图上下文恢复到该状态，在完成复杂的绘图操作后，调用 restore() 方法可以撤销之前的保存操作，恢复到之前的状态，注意，restore() 方法必须与 save() 方法成对使用，否则可能会导致状态栈的不平衡，如果调用 restore() 方法时栈为空，将会引发错误。

变形操作

• 平移：通过 translate(dx, dy) 方法将绘图上下文的原点在 x 轴方向平移 dx 像素，在 y 轴方向平移 dy 像素。translate(50, 50) 将原点向右平移 50 像素，向下平移 50 像素，平移操作会影响后续的所有绘图操作，直到再次调用 translate() 方法或进行其他变形操作。
• 旋转：通过 rotate(angle) 方法将绘图上下文绕原点旋转 angle 弧度。rotate(Math.PI / 2) 将绘图上下文逆时针旋转 90 度，旋转操作会影响后续的所有绘图操作，直到再次调用 rotate() 方法或进行其他变形操作，需要注意的是，旋转的角度是以弧度为单位的，而不是度数，如果要将度数转换为弧度，可以使用公式 弧度 = 度数 (Math.PI / 180)。
• 缩放：通过 scale(sx, sy) 方法将绘图上下文在 x 轴方向缩放 sx 倍，在 y 轴方向缩放 sy 倍。scale(2, 2) 将绘图上下文在 x 轴和 y 轴方向都放大 2 倍，缩放操作会影响后续的所有绘图操作，直到再次调用 scale() 方法或进行其他变形操作，如果只提供一个参数，则表示在 x 轴和 y 轴方向进行相同的缩放。scale(2) 等同于 scale(2, 2)。
• 组合变形：可以通过连续调用多个变形方法来实现复杂的变形效果，先进行平移操作，再进行旋转操作，最后进行缩放操作，变形操作的顺序会影响最终的结果，因为每个变形操作都是基于前一个变形操作的结果进行的，先平移再旋转与先旋转再平移得到的结果是不同的，在进行组合变形时，需要注意变形的顺序和逻辑关系。

裁剪区域

• 创建裁剪区域：通过 clip() 方法可以根据当前的路径创建一个裁剪区域，只有在这个裁剪区域内的绘图操作才会被显示出来，裁剪区域之外的部分将被裁剪掉，先绘制一个矩形路径，然后调用 clip() 方法，那么后续的绘图操作只有在这个矩形区域内才会显示出来。
• 取消裁剪区域：通过 beginPath() 方法可以清除当前的路径和裁剪区域，恢复到默认的无裁剪状态，在调用 beginPath() 方法之后，之前的裁剪区域将不再生效，所有的绘图操作都将在整个画布上进行显示，需要注意的是，beginPath() 方法不仅会清除裁剪区域，还会清除当前的路径，所以在使用 beginPath() 方法之前，如果有未完成的路径操作，需要先调用 closePath() 方法或者 stroke()、fill() 方法来完成路径的绘制。

文本测量

• 测量文本宽度：通过 measureText(text) 方法可以测量给定文本的宽度，该方法返回一个 TextMetrics 对象，其中包含了文本的宽度信息，要测量字符串 “Hello” 的宽度，可以使用以下代码：

  const metrics = ctx.measureText('Hello');
  const width = metrics.width;
  console.log(width); // 输出文本的宽度

• 字体属性：在测量文本宽度之前，需要先设置好字体属性，如字体大小、字体族等，可以通过 font 属性来设置字体样式，ctx.font = '20px Arial'，字体属性的设置会影响文本的测量结果和绘制效果，如果未设置字体属性，则使用默认的字体样式。

图像处理

• 绘制图像：通过 drawImage(image, dx, dy) 方法可以将图像绘制到画布上。image 是一个 <image> 元素或已加载的图像对象，dx 和 dy 是图像在画布上的左上角坐标，要将一个图像绘制到画布的 (50, 50) 位置，可以使用以下代码：

  const img = new Image();
  img.src = 'image.jpg';
  img.onload = function() {
  ctx.drawImage(img, 50, 50);
  };

• 图像裁剪与缩放：drawImage() 方法还可以接受更多的参数来实现图像的裁剪和缩放。drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 可以从图像中裁剪出一个矩形区域（左上角坐标为 (sx, sy)，宽度为 sw，高度为 sh），然后将裁剪后的图像绘制到画布上的指定位置（左上角坐标为 (dx, dy)），并可以指定绘制的宽度 dw 和高度 dh 来实现缩放，如果只提供前三个参数（image, dx, dy），则表示将整个图像绘制到画布上的指定位置，不进行裁剪和缩放，如果提供了前五个参数（image, sx, sy, sw, sh, dx, dy），则表示从图像中裁剪出指定区域并绘制到画布上，不进行缩放，如果提供了全部八个参数（image, sx, sy, sw, sh, dx, dy, dw, dh），则表示从图像中裁剪出指定区域并绘制到画布上，同时进行缩放，要将图像的一部分裁剪并缩放后绘制到画布上，可以使用以下代码：

  const img = new Image();
  img.src = 'image.jpg';
  img.onload = function() {
  // 从图像中裁剪出一个宽度为 100、高度为 100 的区域，从 (50, 50) 开始
  const sx = 50, sy = 50, sw = 100, sh = 100;
  // 将裁剪后的区域绘制到画布上的 (100, 100) 位置，并缩放为宽度 200、高度 200
  const dx = 100, dy = 100, dw = 200, dh = 200;
  ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
  };

• 图像平滑：在绘制图像时，可以通过 imageSmoothingEnabled 属性来控制图像是否使用平滑算法进行缩放，该属性是一个布尔值，默认值为 false，如果设置为 true，则在缩放图像时会使用平滑算法，使图像看起来更加清晰，要在缩放图像时启用平滑功能，可以使用以下代码：

  ctx.imageSmoothingEnabled = true;
  ctx.drawImage(img, 0, 0, 300, 300); // 缩放图像并启用平滑功能

合成操作

• 全局合成操作：通过 globalCompositeOperation 属性可以设置全局的合成操作，用于确定新绘制的图形如何与已有的画布内容进行合成，常见的合成操作包括 source-over（默认值，新图形覆盖在已有内容之上）、destination-over（新图形被已有内容覆盖）、lighter（新图形和已有内容的颜色值相加，显示更亮的颜色）、copy（直接复制新图形，忽略已有内容）等，要将新绘制的红色矩形与已有的蓝色矩形进行合成，并且使用 lighter 合成操作，可以使用以下代码：

  ctx.fillStyle = 'red';
  ctx.globalCompositeOperation = 'lighter';
  ctx.fillRect(50, 50, 100, 100); // 绘制红色矩形，与已有内容进行合成

• 像素级合成操作：除了全局合成操作外，Canvas API 还提供了一些像素级的合成操作函数，如 globalAlpha、globalCompositeOperation、createPattern() 等，这些函数可以更精细地控制图形的合成效果，通过设置 globalAlpha 属性可以控制图形的透明度，从而影响合成效果，要将新绘制的图形设置为半透明，并与已有内容进行合成，可以使用以下代码：

  ctx.fillStyle = 'red';
  ctx.globalAlpha = 0.5; // 设置透明度为 0.5
  ctx.fillRect(50, 50, 100, 100); // 绘制半透明红色矩形，与已有内容进行合成

动画绘制

• 请求动画帧：使用 requestAnimationFrame(callback) 方法可以请求浏览器在下一个动画帧到来时调用指定的回调函数，这个方法通常用于创建动画效果，因为它可以在浏览器准备好绘制下一帧时自动调用回调函数，从而提高动画的性能和流畅度，要创建一个