Să stăpânim API-ul Html Canvas 🔥

va învăța elementele de bază ale html Canvas API și va crea un joc de ping-pong folosind conceptele pe care le vom învăța în acest articol.

Boiler Plată pentru articol

CSS

html, * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}
body {
   text-align: center;
}
.grid {
   background: lightgreen;
   margin: auto;
}
p:nth-child(1) {
   padding: 10px 20px;
   text-align: center;
   font-family: ubuntu;
   font-weight: bolder;
   font-size: 25px;
   text-transform: uppercase;
   color: gray;
}

HTML

<canvas class='grid' width="1000" height="500">
  
</canvas>

JAVASCRIPT

let ctx = document.querySelector("canvas").getContext("2d");

Notă: în acest articol vom manipula numai fișierul script java.

Elementele de bază ale API-ului HTML Canvas

1. Crearea liniei

function createLine(x1, y1, x2, y2) {
       ctx.lineWidth = 5;
       ctx.strokeStyle = "red";
       ctx.beginPath();
       ctx.moveTo(x1, y1);
       ctx.lineTo(x2, y2);
       ctx.stroke();
       ctx.closePath();
}
createLine(0, 0, 10, 10);

lineWidth: acest parametru dă grosimea liniei.

strokeStyle:Acest parametru dă culoare personalizată liniei.

moveTo(): ​​Când vrem să ne mutăm într-un punct fără a trasa o linie pe pânză, folosim comanda mutare.

lineTo(): ​​Când dorim să trasăm o linie de la poziția curentă la poziția dorită, atunci folosim această funcție.

stroke():Când folosim lineTo() linia de comandă nu va fi desenată pe vizibil până și dacă nu folosim comanda stroke() în final.

2. Crearea dreptunghiului

function createRect(x1, y1, width, height) {
       ctx.fillStyle = "red";
       ctx.fillRect(x1, y1, width, height);
 }
createLine(0, 0, 10, 10);

fillStyle:este folosit pentru a da culoare personalizată dreptunghiului care urmează să fie creat.

fillRect():Această comandă este folosită pentru a crea un dreptunghi.

3. Crearea unui cerc

function createCircle(cx, cy, radius) {
       ctx.fillStyle = "red";
       ctx.beginPath();
       ctx.arc(cx, cy, radius, 0, 2 * Math.PI);
       ctx.stroke();       
       ctx.fill();
       ctx.closePath();
}
createCircle(20, 20, 10);

arc():Comanda Arc este utilizată pentru a crea un arc care ia ca parametru coordonata centru x, coordonata centru y, raza, unghi inițial și unghi final.

🕙 Să creăm Jocul PING-PONG 🕟

let circle = {
   x: 100,
   y: 100,
   radius: 10,
   dx: 2,
   dy: 2
}
let rect = {
   x: 488,
   y: 0,
   width: 10,
   height: 50,
}
let line = {
   init_x: 100,
   init_y: 100,
   fin_x: 0,
   fin_y: 0
 }
let ctx = document.querySelector("canvas").getContext("2d");
function draw_circle() {
   ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
   ctx.beginPath();
   ctx.arc(circle.x , circle.y, circle.radius, 0, Math.PI * 2);
   ctx.fillStyle = 'red';
   ctx.fill();
   ctx.fillStyle = 'blue';
   ctx.fillRect(rect.x,rect.y,rect.width,rect.height);
}
function draw_animated_circle() {
   draw_circle(circle);
   circle.x += circle.dx;
   circle.y += circle.dy;
   line.init_x = line.fin_x
   line.init_y = line.fin_y
   line.fin_x = circle.x;
   line.fin_y = circle.y;
   if(circle.x + circle.radius ==rect.x && 
   (  circle.y + circle.radius >rect.y && 
      circle.y + circle.radius <rect.y +
      rect.height + 2 * circle.radius)
   ) {
      circle.dx *= -1;
   }
   if(circle.x + circle.radius >= ctx.canvas.width || 
      circle.x  <= circle.radius
   ) {
      if(circle.x + circle.radius >= ctx.canvas.width){
         alert("gameover");
         window.location.reload();
      }
      circle.dx *= -1;
   }
   if(circle.y + circle.radius >= ctx.canvas.height || 
       circle.y  <= circle.radius
   ) {
        circle.dy *= -1;
   }
   requestAnimationFrame(draw_animated_circle);
}

function init() {
   document.querySelector("body").addEventListener("keydown", 
    (e) => {
          if(e.keyCode == 38 &&rect.y >= 2) {
             rect.y -= 10 
          }
          if(e.keyCode == 40 && 
             rect.y +rect.height < ctx.canvas.height - 7
          ) {
             rect.y += 10 
          }
   })   
   draw_animated_circle();
}
init();

requestAnimationFrame : metoda îi spune browserului că doriți să efectuați o animație și solicită browserului să apeleze o funcție specificată pentru a actualiza o animație înainte de următoarea vopsire. Metoda ia un callback ca argument pentru a fi invocat înainte de revopsire.

„CodePen” Link către jocul de ping pong pe care l-am creat.

Notă: doar folosind aceste concepte de bază, puteți crea multe animații frumoase și multe altele.

Pentru a afla mai multe despre pânză, puteți consulta documentația MDN.