Skip to content

Experimentează și Exploreaza Elementele Multimedia și Canvas in HTML5

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:
  • Atributul controls adaugă controale de redare (play, pause, volum etc.) pentru elementele multimedia. Aceasta oferă utilizatorilor posibilitatea de a controla și personaliza experiența lor.
<audio controls>
  <source src="audiofile.mp3" type="audio/mp3">
  Browserul dvs. nu suportă eticheta audio.
</audio>
2. Autoplay:
  • Atributul autoplay determină începerea redării automatice a conținutului multimedia imediat ce pagina este încărcată. Este util pentru conținutul care trebuie redat automat.
<video autoplay width="480" height="360">
  <source src="videofile.mp4" type="video/mp4">
  Browserul dvs. nu suportă eticheta video.
</video>
3. Loop:
  • Atributul loop face ca redarea conținutului multimedia să se repete continuu. Este util pentru conținutul care ar trebui să fie redat în mod repetat.
<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:
  • Folosiți metoda lineTo(x, y) pentru a desena linii pe canvas.
<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:
  • Utilizați metoda arc(x, y, radius, startAngle, endAngle, anticlockwise) pentru a desena arcuri pe canvas.
<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:
  • Folosiți metoda fillText(text, x, y) pentru a adăuga text pe canvas.
<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>