Overview:

În această continuare a lecției anterioare, ne vom concentra pe experimentarea cu diverse atribute ale elementelor <audio> și <video> și vom explora metode avansate de desen pe elementul <canvas>. Această parte a cursului încurajează creativitatea și oferă studenților libertatea de a personaliza experiența multimedia și de a dezvolta grafică complexă în cadrul paginilor web.

Atribute Avansate ale Elementelor Multimedia:

1. Controls:
<audio controls>
  <source src="audiofile.mp3" type="audio/mp3">
  Browserul dvs. nu suportă eticheta audio.
</audio>
2. Autoplay:
<video autoplay width="480" height="360">
  <source src="videofile.mp4" type="video/mp4">
  Browserul dvs. nu suportă eticheta video.
</video>
3. Loop:
<audio controls loop>
  <source src="audiofile.mp3" type="audio/mp3">
  Browserul dvs. nu suportă eticheta audio.
</audio>

Explorarea Metodelor Avansate de Desen pe Canvas:

1. Desenarea Linii:
<canvas id="lineCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
<script>
  var canvas = document.getElementById("lineCanvas");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(20, 20);
  ctx.lineTo(180, 80);
  ctx.stroke();
</script>
2. Desenarea Arcurilor:
<canvas id="arcCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
<script>
  var canvas = document.getElementById("arcCanvas");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.arc(100, 50, 40, 0, 2 * Math.PI);
  ctx.stroke();
</script>
3. Desenarea Textului:
<canvas id="textCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
<script>
  var canvas = document.getElementById("textCanvas");
  var ctx = canvas.getContext("2d");
  ctx.font = "20px Arial";
  ctx.fillText("Hello, Canvas!", 20, 50);
</script>