html5 HTML5 Canvas-Основни техники и примери

toni · May 15, 2023

HTML5 Canvas-Основни техники и примери

HTML5 Canvas е мощен инструмент, който предоставя 2D рисуване на веб базирани приложения в реално време. Той предлага гъвкавост и контрол, който може да превърне всяка идея в реалност, от създаването на просто приложение за рисуване до разработката на пълноценна игра като Тик-Так-То.

Разработка на приложение за рисуване
Нека започнем с просто приложение за рисуване. В нашия пример, приложението позволява на потребителите да рисуват на екрана с мишката. Когато потребителят натисне и задържи бутона на мишката, кодът започва да рисува линия по пътя на мишката. Когато бутона на мишката се освободи, рисуването спира.

HTML:

<!DOCTYPE html>
<html>
<body>
<!-- Създаваме canvas елемент с ID "myCanvas" и определяме размерите и стил -->
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
// Получаваме референция към canvas елемента
var canvas = document.getElementById('myCanvas');

// Получаваме 2D контекст, който ни дава методи и свойства за рисуване на canvas
var ctx = canvas.getContext('2d');

// Обектът mouse съхранява текущите координати на мишката
var mouse = {x: 0, y: 0};

// Слушаме за събитието "mousemove" и обновяваме координатите на мишката при всяко движение
canvas.addEventListener('mousemove', function(e) {
  mouse.x = e.pageX - this.offsetLeft;
  mouse.y = e.pageY - this.offsetTop;
}, false);

// Настройваме параметрите на линията, която ще рисуваме
ctx.lineWidth = 3;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = '#00CC99';

// Когато бутонът на мишката е натиснат, започваме нова пътека и добавяме слушател за събитието "mousemove"
canvas.addEventListener('mousedown', function(e) {
    ctx.beginPath();
    ctx.moveTo(mouse.x, mouse.y);

    canvas.addEventListener('mousemove', onPaint, false);
}, false);

// Когато бутонът на мишката е освободен, премахваме слушателя за събитието "mousemove"
canvas.addEventListener('mouseup', function() {
    canvas.removeEventListener('mousemove', onPaint, false);
}, false);

// Функцията onPaint добавя нова точка към пътеката и рисува линията
var onPaint = function() {
    ctx.lineTo(mouse.x, mouse.y);
    ctx.stroke();
};

</script>

</body>
</html>

Този код е пример как можем да използваме мишката в комбинация с HTML5 Canvas API, за да създадем интерактивно приложение за рисуване.

Разработка на игра с HTML5 Canvas
След като разберем основите, можем да преминем към нещо по-сложно - играта Тик-Так-То. Това е класическа игра, която можем да реализираме използвайки HTML5 Canvas.

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
  body { text-align: center; }
  canvas { border: 1px solid black; }
</style>
</head>
<body>
<canvas id="ticTacToeBoard" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById('ticTacToeBoard');
var context = canvas.getContext('2d');
var cellSize = 100;
var board = Array(9).fill(null);
var currentPlayer = 'X';

canvas.addEventListener('click', handleCanvasClick);

function handleCanvasClick(e) {
  var x = e.clientX - canvas.offsetLeft;
  var y = e.clientY - canvas.offsetTop;
  var cell = Math.floor(x / cellSize) + Math.floor(y / cellSize) * 3;

  if (board[cell] === null && !isGameOver()) {
    board[cell] = currentPlayer;
    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
    drawBoard();
  }
}

function isGameOver() {
  var lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
  ];

  for (var line of lines) {
    if (board[line[0]] !== null &&
        board[line[0]] === board[line[1]] &&
        board[line[0]] === board[line[2]]) {
      return true;
    }
  }

  if (!board.includes(null)) {
    return true;
  }

  return false;
}

function drawBoard() {
  context.clearRect(0, 0, canvas.width, canvas.height);

  for (var i = 0; i < board.length; i++) {
    var x = (i % 3) * cellSize;
    var y = Math.floor(i / 3) * cellSize;

    context.strokeRect(x, y, cellSize, cellSize);

    context.font = '50px sans-serif';
    context.textBaseline = 'middle';
    context.textAlign = 'center';
    if (board[i] === 'X') {
      context.strokeText('X', x + cellSize / 2, y + cellSize / 2);
    } else if (board[i] === 'O') {
      context.strokeText('O', x + cellSize / 2, y + cellSize / 2);
    }
  }

  if (isGameOver()) {
    context.font = '30px sans-serif';
    context.fillText('Game Over', canvas.width / 2, canvas.height / 2);
  }
}

drawBoard();
</script>

</body>
</html>

Този код използва HTML5 Canvas за визуализиране на игралното поле и обектите в играта. Играта проверява дали има победител или ако всички полета са запълнени и играта е приключила.

Заключение
HTML5 Canvas е мощен инструмент, който може да бъде използван за създаване на различни видове веб приложения, от прости приложения за рисуване до сложни игри. Независимо дали сте начинаещ или опитен разработчик, Canvas предлага възможности, които могат да повишат качеството и интерактивността на вашите веб приложения.

HTML5 Canvas е елемент, включен в HTML5, който позволява на разработчиците да рисуват графики на уеб страница в реално време. Той е много гъвкав и може да се използва за създаване на анимации, игри и други интерактивни изображения.

Ето основния формат на HTML5 Canvas:

HTML:

<canvas id="myCanvas" width="500" height="500">
  Your browser does not support the HTML5 canvas tag.
</canvas>

След като имаме HTML5 canvas елемент, трябва да използваме JavaScript, за да рисуваме на него. Това обикновено се извършва по следния начин:

Използваме метода getElementById() на обекта document, за да вземем референция към canvas елемента:

JavaScript:

var canvas = document.getElementById('myCanvas');

Използваме метода getContext() на canvas елемента, за да създадем рендериращ контекст. Обикновено използваме 2D контекст:

JavaScript:

ctx.fillStyle = 'red'; // задава цвета на пълнежа
ctx.fillRect(10, 10, 100, 100); // рисува пълен квадрат

След като имаме контекста, можем да използваме различни методи и свойства на контекста, за да рисуваме на платното. Например:

JavaScript:

ctx.fillStyle = 'red'; // задава цвета на пълнежа
ctx.fillRect(10, 10, 100, 100); // рисува пълен квадрат

За да изчистим платното, можем да използваме метода clearRect():

JavaScript:

ctx.clearRect(0, 0, canvas.width, canvas.height);

Това е основата на използването на HTML5 Canvas. Има много други методи и свойства, които можете да използвате за създаване на сложни графики и анимации.

Преди да си тръгнете - едно щракване върху бутона за гласуване ще направи и двама ни щастливи.

“© 2023 Тони Ангелчовски Всички права запазени”

Search

Search

Здравейте, майстори на заваряването, кодирането и автомобилните технологии!

Приключението започва тук. Добре дошли в DTGARAGE.EU!

html5 HTML5 Canvas-Основни техники и примери