HTML的多媒体元素

好的，以下是带有 JavaScript 控制的 HTML 元素示例：

<canvas>

• 用途：通过 JavaScript 绘制和控制动态图形。
• 示例：

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'blue';
  ctx.fillRect(10, 10, 150, 80);

  // 动态改变颜色
  setTimeout(() => {
    ctx.fillStyle = 'red';
    ctx.fillRect(10, 10, 150, 80);
  }, 1000);
</script>

<svg>

• 用途：通过 JavaScript 动态控制矢量图形。
• 示例：

<svg id="mySvg" width="100" height="100">
  <circle id="myCircle" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<script>
  const circle = document.getElementById('myCircle');
  
  // 改变圆形颜色
  setTimeout(() => {
    circle.setAttribute('fill', 'blue');
  }, 1000);
</script>

<img>

• 用途：通过 JavaScript 动态更改图像。
• 示例：

<img id="myImage" src="example.jpg" alt="Example Image" width="200" height="150">
<script>
  const image = document.getElementById('myImage');
  
  // 改变图像源
  setTimeout(() => {
    image.src = 'new_example.jpg';
  }, 1000);
</script>

<video>

• 用途：通过 JavaScript 控制视频播放。
• 示例：

<video id="myVideo" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
<script>
  const video = document.getElementById('myVideo');
  
  // 播放视频
  setTimeout(() => {
    video.play();
  }, 1000);
</script>

<audio>

• 用途：通过 JavaScript 控制音频播放。
• 示例：

<audio id="myAudio" controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
<script>
  const audio = document.getElementById('myAudio');
  
  // 播放音频
  setTimeout(() => {
    audio.play();
  }, 1000);
</script>

这些示例展示了如何使用 JavaScript 动态控制 HTML 元素的行为。