Opanujmy HTML Canvas API 🔥

poznamy podstawy html Canvas API i stworzymy grę Ping Pong wykorzystując koncepcje, których nauczymy się w tym artykule.

Płyta kotła do artykułu

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");

Uwaga: w tym artykule będziemy manipulować wyłącznie plikiem skryptu Java.

Podstawy API HTML Canvas

1. Tworzenie linii

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: ten parametr określa grubość linii.

strokeStyle:ten parametr nadaje linii niestandardowy kolor.

moveTo(): ​​Gdy chcemy przejść do punktu bez rysowania linii na płótnie, używamy polecenia przesuwania.

lineTo(): ​​Gdy chcemy narysować linię od aktualnej pozycji do żądanej pozycji, używamy tej funkcji.

stroke():Kiedy użyjemy polecenia lineTo(), linia poleceń nie zostanie narysowana na widocznym obszarze, dopóki na końcu nie użyjemy polecenia Stroke().

2. Tworzenie prostokąta

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

fillStyle:służy do nadawania niestandardowego koloru tworzonemu prostokątowi.

fillRect():To polecenie służy do tworzenia prostokąta.

3. Tworzenie kręgu

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():Polecenie Łuk służy do tworzenia łuku, którego parametrem jest współrzędna środka x, współrzędna środka y, promień, kąt początkowy i kąt końcowy.

🕙 Stwórzmy grę 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 informuje przeglądarkę, że chcesz wykonać animację i żąda, aby przeglądarka wywołała określoną funkcję w celu aktualizacji animacji przed kolejnym odświeżeniem. Metoda przyjmuje wywołanie zwrotne jako argument, który ma zostać wywołany przed odświeżeniem.

CodePen Link do stworzonej przez nas gry w ping-ponga.

Uwaga: korzystając z tych podstawowych pojęć, możesz stworzyć wiele pięknych animacji i wiele więcej.

Aby dowiedzieć się więcej o canvasie, zapoznaj się z dokumentacją MDN.