Was ist HTML Canvas?

Von Alex Draev 11-01-2021 Entwicklergedanken, Programmierung 12 Minuten

Canvas ist eines der Grafikelemente im Webdesign. Canvas 2D API (Application Program Interface) ist ein Objekt, das es uns erlaubt, Spielgrafiken, Graphen, Text und visuelle Bilder mit JavaScript und HTML5 zu zeichnen und zu manipulieren.

Canvas ist sehr interaktiv, da es leicht auf JavaScript und DOM Events reagiert. Es wird oft mit SVG, einem anderen Grafikelement in HTML5, verglichen. Obwohl es sich bei beiden um Grafikelemente handelt, unterscheiden sie sich in Funktionalität, Umfang und Zweck. Canvas hat eine bessere Rendering-Unterstützung und Interaktivität.
Um Canvas zu benutzen, musst du mit JavaScript vertraut sein.

Die Features von Canvas

Verwendet JavaScript
Ist bitmap- oder pixelbasiert
Verwendet Hardwarebeschleunigung für das gesamte Rendering
Beteiligt sich an komplexeren Grafiken als SVG
Wird in Spieleanwendungen verwendet
Verwendet Koordinaten, um Elemente zu zeichnen und zu positionieren.

Die erstenSchrittemit Canvas

Um mit Canvas zu beginnen, werden wir das <canvas></canvas> Tag verwenden. Dieses Tag muss eine Breite und Höhe haben. Entweder inline oder innerhalb des CSS, das die Größe des Canvas festlegt. Jedes Canvas muss eine Klasse oder Id haben, die im JavaScript referenziert wird.
Wenn wir einen <canvas> definieren, erzeugt das eine leere Zeichenfläche mit einem Rendering-Kontext. In JavaScript müssen wir diese 2D-API mit einem Variablennamen zuweisen.

Grundlegende Eigenschaften und Methoden von HTML Canvas

Canvas hat grundlegende Eigenschaften und Methoden wie z.B.:

fillStyle - um die Farbe, den Farbverlauf oder das Muster für ein Canvas-Objekt zu definieren.
fillRect - um ein Rechteck zu zeichnen, das mit den Werten aus fillStyle gefüllt ist.
getContext() - um den Rendering-Kontext zu erhalten.

Snake mit Canvas programmieren

In diesem Artikel werden wir das berühmte Snake-Spiel in einem Schritt-für-Schritt-Code erstellen, um dir zu zeigen, wie du die Funktionen von HTML Canvas und die enormen Möglichkeiten, die es bietet, umsetzen kannst. Die Schlange bewegt sich über einen Rendering-Kontext in Canvas und frisst die Früchte. Wenn sie den Rand des Kontexts oder sich selbst berührt, ist das Spiel vorbei.

HTML und CSS

<!DOCTYPE html> 
<html> 
<head>
  <title>Snake Game!</title> 
  <style> 
    canvas{ 
      background-color: pink; 
    } 
  </style> 
</head> 
<body> 
  <canvas id="myCanvas" width="600" height="600"></canvas>

Das setzt das HTML für das Canvas. Hier haben wir ein Canvas, das auf Breite 500 und Höhe 500 eingestellt ist. Diese Definition ist entscheidend, da sie die Größe des Canvas festlegt. Wir haben die Leinwand auch im Kopf des HTML gestylt und ihr einen rosa Hintergrund gegeben.
Unsere Leinwand hat auch ein wichtiges Attribut - den Id-Namen ('myCanvas'). Wir werden diesen Namen im JavaScript referenzieren, damit das Programm erkennen kann, welchen Canvas-Kontext wir verwenden wollen. Mit anderen Worten, dein HTML kann so viele Canvas wie möglich haben, und jede muss ihre eigene Id haben, um in JavaScript einfach referenziert werden zu können.

Das Script

Hier zeichnen wir, was wir auf dem Bildschirm sehen wollen.

//defining the variables 
let snakecanvas = document.querySelector('#myCanvas');
let context = snakecanvas.getContext('2d');
let snakebox = 25;
let size = 23;
let gradient = context.createRadialGradient(10, 20, 10, 100, 70, 100);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "white");

Ein Canvas ist normalerweise leer. Um auf es zuzugreifen, müssen wir ihre Id oder Klasse ermitteln und dann den Rendering-Kontext mit getContext() abrufen. Der getContext wird wie folgt bezeichnet:

let context = snakecanvas.getContext('2d');

Die Variable 'context' wird im gesamten Code verwendet, um andere Attribute und Eigenschaften zu definieren. Wir setzen die snakebox auf 25 und die Leinwandgröße auf 23.
Mit der Kontextvariable legen wir einen radialen Farbverlauf mit zwei Farbstopps von Rot und Weiß fest. Dieser Farbverlauf wird die Füllfarbe für eines der Rechtecke sein.

//score variable for the game 
let score = 0;
//load snake starting position
let snake = [];
snake[0] =
{
  x: Math.floor((size/2)) * snakebox,
  y: Math.floor((size/2)) * snakebox 
};
//set direction getting pressed by arrow keys 
let direction; 
var pressed = false; 
document.addEventListener('keydown', snakeDirection);

Nun setzen wir den Startpunktwert für das Spiel. Dann laden wir den Startpunkt der Schlange. Dieser Punkt ist das Ergebnis der Division der Leinwandgröße durch 2 und der anschließenden Multiplikation mit der snakebox. Wir verwenden die math.floor Methode, um sicherzustellen, dass die Ausgabe eine ganze Zahl ist.
Die x und y sind die x und y Koordinaten des Canvas Kontextes.

//set direction of the snake if a an arrow key is pressed 
let direction; 
var pressed = false; 
document.addEventListener('keydown', snakeDirection);

function snakeDirection(event){ 
  if(event.code == 'ArrowLeft' && direction != 'RIGHT'){ 
    direction = "LEFT"; 
  } 
  else if(event.code == 'ArrowUp' && direction != 'DOWN'){ 
    direction = "UP"; 
  } 
  else if(event.code == 'ArrowRight' && direction != 'LEFT'){ 
    direction = "RIGHT"; 
  } 
  else if(event.code == 'ArrowDown' && direction != 'UP'){ 
    direction = "DOWN";        
  }  
}

Die Schlange kann sich in verschiedene Richtungen bewegen. Wir setzen einen EventListener und eine Funktion für die Richtung der Schlange. Wenn die Schlange nicht nach links geht, dann sollte sie nach rechts gehen. Wenn sie nicht nach oben geht, dann sollte sie nach unten gehen. Die Event Codes und Tasten für verschiedene Tasten findest du hier.

// setting the location of the food 
let food = { 
  x: Math.floor(1 + (Math.random() * (size - 1))) * snakebox, 
  y: Math.floor(1 + (Math.random() * (size - 1))) * snakebox  
}

Das Futter für die Schlange taucht dann an verschiedenen Stellen im Kontext auf. Wir berechnen die Position und Größe in Bezug auf die Snakebox und den Kontext der Leinwand. Die Math.random Funktion lässt das Futter zufällig auftauchen.

//function to draw the snake 
function drawSnake(){ 
  context.fillStyle = gradient; 
  context.fillRect(snakebox, snakebox, size*snakebox - snakebox, size*snakebox-snakebox); 
  //draw the snake head and tail 
  for(let i = 0; i < snake.length; i++){ 
    context.fillStyle = 'blue'; 
    context.fillRect(snake[i].x, snake[i].y, snakebox, snakebox); 
    if(snake[i].x == food.x && snake[i].y == food.y){ 
      food = { 
        x: Math.floor(1 + (Math.random() * (size - 1))) * snakebox, 
        y: Math.floor(1 + (Math.random() * (size - 1))) * snakebox 
      }
    }
  }
}

Hier erstellen wir eine Funktion, um die Schlange zu zeichnen und eine Schleife, um sicherzustellen, dass unsere Berechnungen für jede Schlange funktionieren und nicht nur für eine Schlange. Wir weisen Blau als Farbe der Schlange zu.
Der context.fillStyle nimmt die anfänglich eingestellte Farbverlaufsfarbe.
Das fillRect definiert den Kontext aller Schlangenbewegungen. In den Parametern ist die erste Schlangenbox die x-Koordinate und die zweite die y-Koordinaten. Sie platziert die Schlange fest in der Mitte der Seite.

//to move the snake 
let snakeX = snake[0].x; 
let snakeY = snake[0].y; 
 
if(direction == "LEFT") 
  snakeX -= snakebox; 
if(direction == "RIGHT") 
  snakeX += snakebox; 
if(direction == "UP") 
  snakeY -= snakebox; 
if(direction == "DOWN") 
  snakeY += snakebox;

Nun fügen wir unsere Koordinaten zur Richtung der Schlange hinzu

// if the snake eats the food 
if(snakeX == food.x && snakeY == food.y) { 
  score+=1; 
  food = { 
    x: Math.floor(1 + (Math.random() * (size - 1))) * snakebox, 
    y: Math.floor(1 + (Math.random() * (size - 1))) * snakebox  
  } 
} 
else { 
  snake.pop(); 
}

Im Snake-Spiel wächst die Schlange um so länger, je mehr Futter sie verschlingt. In diesem Snippet berechnen wir die Länge der Schlange, während sie zu den Koordinaten des Canvas-Kontextes wächst. Die pop()-Methode entfernt den Schwanz (ausnahmslos die Schlange), wenn die Schlange das Futter nicht fressen kann.
score+= 1 fügt das Scoreboard hinzu. Wenn du die Schlange treffen kannst, dann wird eine einzelne Ziffer zu deinem Punktestand hinzugefügt.

 let newHead = { 
  x: snakeX, 
  y: snakeY 
}; 
//check collision 
function collision(head, array){ 
  for(let i = 0; i < array.length; i++) {
    if(head.x == array[i].x && head.y == array[i].y) { 
      return true; 
    } 
  } 
  return false; 
}

Dann wird auf Kollisionen geprüft - wenn eine Schlange gegen die Kanten/Wände des Kontexts oder gegen sich selbst stößt, heißt es Game Over.

//game over 
if(snakeX < snakebox || snakeY < snakebox || snakeX > ((size - 1) * snakebox)|| snakeY > ((size - 1) * snakebox) || collision(newHead,snake)) { 
  clearInterval(game);
  score = "Game over!";
}

Dies beeinflusst das Spiel, wenn die Schlange entweder sich selbst oder den Leinwandkontext trifft. Wenn das passiert, wird die Anzeigetafel gelöscht und 'Game Over' angezeigt. Der Spieler muss auch die Seite aktualisieren, um ein neues Spiel zu starten.

snake.unshift(newHead); 
//draw in food 
context.fillStyle = 'red'; 
context.fillRect(food.x, food.y, snakebox, snakebox);

Dies legt den Stil für das Futter fest. Hier setzen wir den fillStyle auf rot und den fillRect auf gemessene Koordinaten innerhalb des Canvas-Kontextes.

//draw score 
    context.fillStyle = 'Black'; 
    context.font = '20px Arial Bold'; 
    context.clearRect(0, 0, 50, 25); 
    context.fillText(score, snakebox, 0.8 * snakebox); 
} 
 
let game = setInterval(drawSnake, 100); 
    </script> 

  </body>
</html>

Jetzt der letzte Teil des Skripts. Hier legen wir das Styling für die Anzeigetafel fest, und ihre Position im oberen, linken Teil des Kontexts mit context.fillText, context.font. context.fillStyle weist den Spielständen die Farbe Schwarz zu. clearRect() löscht das Rechteck der Anzeigetafel und setzt es für ein neues Spiel wieder auf 0.

Unterstüzte Browser

Alle aktuellen Versionen von Firefox, Chrome, Internet Explorer und Safari unterstützen Canvas.

Nachteile von Canvas

Obwohl Canvas ziemlich beliebt ist und von den wichtigsten Browsern unterstützt wird, hat es wenig Einfluss auf Webgrafiken. Das liegt an folgenden Punkten:

Es ist langsam beim Zeichnen komplexer Grafiken.
Skaliert nicht leicht und wird daher beim Zoomen oder in größeren Zusammenhängen unscharf.
Zu viel Code für einfache Animationen.
Kann von Suchmaschinen nicht gelesen oder interpretiert werden.
Es ist zustandslos.

Abschließende Worte

In diesem Artikel haben wir gezeigt, wie Canvas verwendet werden kann, um eine einfache Spielanwendung innerhalb von HTML zu erstellen. Die Möglichkeiten von Canvas sind so vielfältig, wie es sich ein Entwickler vorstellen kann. Es sollten auch die Nachteile in Betracht gezogen werden, um zu entscheiden, ob Canvas das beste Werkzeug für ein Projekt ist.
Einer der Nachteile der Verwendung von Canvas ist, dass es JavaScript benötigt. Das stellt also eventuell eine Herausforderung für HTML-Programmierer dar.

Was ist HTML Canvas?