探索 JavaScript 的奇幻世界：从基础到创意实践（二）

时间：2026-10-20  编辑：

二、创意性的实践应用

1. 用 Canvas 实现动态视觉效果 Canvas 是一个强大的工具，用于在网页上绘制图形。你可以利用它创建动态背景或交互式动画。

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function drawCircle(x, y, radius) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2);
  ctx.fillStyle = 'rgba(0, 150, 255, 0.5)';
  ctx.fill();
}

canvas.addEventListener('mousemove', (event) => {
  drawCircle(event.clientX, event.clientY, 20);
});

2. Web Speech API：语音驱动的交互体验 通过 Web Speech API，你可以创建语音控制的网页应用。

const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'en-US';
recognition.onresult = (event) => {
  const command = event.results[0][0].transcript;
  console.log(`You said: ${command}`);
};
recognition.start();

3. 游戏开发：基于 DOM 的小游戏 JavaScript 可以快速开发基于 DOM 的小游戏，比如一个简单的打砖块游戏。

const ball = document.getElementById('ball');
let position = 0;
let direction = 1;

function moveBall() {
  position += direction;
  ball.style.left = `${position}px`;
  if (position >= 300 || position <= 0) direction *= -1;
  requestAnimationFrame(moveBall);
}
moveBall();