使用 DOM、点击事件和 Web API

Source: Dev.to

什么是 API，以及什么是 Web API？

这些类型的 API 通常分为两大类：浏览器 API 和 第三方 API。

• 浏览器 API 暴露浏览器中的数据。作为网页开发者，你可以使用 JavaScript 访问并操作这些数据。
• 它们还提供对各种功能的访问，例如操作网站结构、处理事件、使用存储以及与网络通信。

一些常用的浏览器 API 示例包括：

• DOM API – 用于操作 HTML 元素、其样式和属性。它是网页开发的核心概念。
• Storage API – 用于在用户设备本地存储数据。

什么是 requestAnimationFrame() API，如何用它来建立动画循环？

要使用 requestAnimationFrame() 方法，调用它并传入一个回调函数：

requestAnimationFrame(callback);

典型的动画循环由一个 animate() 函数组成，该函数更新动画后再请求下一帧：

function animate() {
  // Update the animation (e.g., move an element, change a style, etc.)
  update();

  // Request the next frame
  requestAnimationFrame(animate);
}

update() 函数包含你想要动画化的实际变化：

function update() {
  element.style.transform = `translateX(${position}px)`;
  position += 2;
}

在 animate 函数之外调用 requestAnimationFrame() 并传入 animate 函数，以启动动画：

requestAnimationFrame(animate);

什么是 Web Animations API，它与 CSS 动画属性有什么关联？

使用时机： 当你需要动画响应用户交互（点击、滚动）或需要动态控制（如暂停或反转）时。

Web Animations API（WAAPI）允许你直接在 JavaScript 中创建和控制动画。核心是 Animation 构造函数，其 animate() 方法根据关键帧和选项创建动画。

基本示例

const square = document.querySelector("#square");

const animation = square.animate(
  [
    { transform: "translateX(0px)" },
    { transform: "translateX(100px)" }
  ],
  {
    duration: 2000,          // 2 seconds
    iterations: Infinity,    // loop indefinitely
    direction: "alternate", // back‑and‑forth
    easing: "ease-in-out"
  }
);

使用按钮控制播放

const square = document.querySelector("#square");
const playBtn = document.querySelector("#playBtn");
const pauseBtn = document.querySelector("#pauseBtn");

const animation = square.animate(
  [
    { transform: "translateX(0px)" },
    { transform: "translateX(200px)" }
  ],
  {
    duration: 5000,
    // iterations: Infinity,
    direction: "alternate",
    easing: "ease-in-out"
  }
);

// 动画完成时记录日志
animation.onfinish = () => {
  console.log("Animation finished!");
};

// 播放动画
playBtn.addEventListener("click", () => {
  animation.play();
  console.log("You start the animation");
});

// 暂停动画
pauseBtn.addEventListener("click", () => {
  animation.pause();
  console.log("You pause the animation");
});

什么是 Canvas API，它是如何工作的？

Canvas API 让你可以通过 JavaScript 直接绘制图形。它以 HTML 中的 <canvas> 元素为起点，该元素充当绘图表面。

添加 Canvas 元素

你可以在 HTML 中或通过 JavaScript 设置其尺寸。以下是使用 JavaScript 设置尺寸的方法：

const canvas = document.getElementById("my-canvas");
canvas.width = 400;
canvas.height = 400;

获取绘图上下文

const canvas = document.getElementById("my-canvas");
const ctx = canvas.getContext("2d"); // 2‑D rendering context

绘制填充矩形

const canvas = document.getElementById("my-canvas");
const ctx = canvas.getContext("2d");

// 设置填充颜色
ctx.fillStyle = "crimson";

// 绘制矩形（x, y, 宽度, 高度）
ctx.fillRect(1, 1, 150, 100);

绘制文字

const textCanvas = document.getElementById("my-text-canvas");
const textCtx = textCanvas.getContext("2d");

// 字体设置
textCtx.font = "30px Arial";
textCtx.fillStyle = "crimson";

// 绘制文字
textCtx.fillText("Hello HTML Canvas!", 1, 50);

结果是在页面上显示红色文字 Hello HTML Canvas!。

Canvas API 可以与 requestAnimationFrame() 结合，创建自定义动画、可视化、游戏等。

如何使用 JavaScript 打开和关闭对话框元素？

对话框让你显示重要信息或 …（内容已截断）