Давайте освоим Html Canvas API 🔥

изучат основы html Canvas API и создадут игру в пинг-понг, используя концепции, которые мы изучим в этой статье.

Котельная плита для статьи

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>

ЯВАСКРИПТ

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

Примечание. В этой статье мы будем работать только с файлом сценария Java.

Основы HTML Canvas API

1. Создание линии

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: этот параметр определяет толщину линии.

strokeStyle: этот параметр задает пользовательский цвет линии.

moveTo(): ​​ когда мы хотим переместиться в точку, не рисуя линию на холсте, мы используем команду перемещения.

lineTo(): ​​ когда мы хотим нарисовать линию от текущей позиции до желаемой позиции, мы используем эту функцию.

stroke(): когда мы используем командную строку lineTo(), она не будет отображаться на видимом до тех пор, пока мы не используем команду stroke() в конце.

2. Создание прямоугольника

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

fillStyle: используется для придания пользовательского цвета создаваемому прямоугольнику.

fillRect(): эта команда используется для создания прямоугольника.

3. Создание круга

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():команда Arc используется для создания дуги, которая принимает координату центра x, координату центра y, радиус, начальный угол и конечный угол в качестве параметра.

🕙 Создадим игру ПИНГ-ПОНГ 🕟

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 : метод сообщает браузеру, что вы хотите выполнить анимацию, и запрашивает, чтобы браузер вызвал указанную функцию для обновления анимации перед следующей перерисовкой. Метод принимает обратный вызов в качестве аргумента, который должен быть вызван перед перерисовкой.

CodePen Ссылка на созданную нами игру в пинг-понг.

Примечание. Используя эти базовые концепции, вы можете создать множество красивых анимаций и многое другое.

Чтобы узнать больше о canvas, вы можете обратиться к документации MDN.