HTML Canvas Made Simple : un guide pour les débutants.-js tutoriel-php.cn

HTML Canvas Made Simple : un guide pour les débutants.

Mary-Kate Olsen

Libérer： 2024-12-20 13:38:10

original

714 Les gens l'ont consulté

Table des matières

Présentation
Démarrage
Bases du dessin
Ajout de texte
Conclusion et prochaines étapes

? Présentation

HTML est un élément HTML avec la balise

HTML Canvas Made Simple: A Guide for Beginners.

L'utilisation de

Cas d'utilisation de HTML

Dessiner des formes et des lignes : il peut dessiner des formes, des motifs et des lignes, y compris l'ajout de couleurs et de dégradés aux objets.
Animation et interaction : Les objets créés par
Manipulation des images : cela peut être utilisé pour redimensionner ou recadrer des images.
Graphiques du jeu : il est également utilisé par les développeurs de jeux pour créer de superbes interfaces utilisateur de jeu
Visualisation des données : elle sert à la création de graphiques et de diagrammes.

?Commencer

Le HTML

<!doctype html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>HTML Canvas Example</title>
     </head>
     <body>
       <canvas>



<p>Then we add a script tag so we can define the behavior of the object.<br>
</p>

<pre class="brush:php;toolbar:false"><!doctype html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>HTML Canvas Example</title>
     </head>
     <body>
       <canvas>



<p>Wowu !!! We get the output.</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173467309470040.jpg" alt="HTML Canvas Made Simple: A Guide for Beginners."></p>

<p>Looking at the structure of the code. We define canvas wrapper having an id attribute, this is can only be done by id and not class because of uniqueness which is used to reference the canvas with the id name.<br>
To access this we need to retrieve the node created in the Document Object Model(DOM) by using the getElementById("myCanvas") and have access to it using the getContext("2d") method.</p>

<p>This method make us to have access to different drawing methods like</p>

Copier après la connexion

fillRect(x, y, width, height): This method is to draw a filled rectangle at a position(x, y) with a specified width and height.
fillStyle = colorName: It is a property to set the color for the object. It could be a colorname, RGB or hex code for the object.

Other methods are:

strokeRect(x, y, width, height): This method to to make a outline stroke on the rectangle, this may be used independently or combined with fillStyle and fillRect(x, y, width, height).
clearRect(x, y, width, height): to clear the rectangle by making it transparent.

HTML Canvas Made Simple: A Guide for Beginners.

? Drawing basics

Different shapes and lines can be drawn using some specific methods depending on the object.

1. Path:

Examples are line, wavy line, zigzag e.t.c

HTML Canvas Made Simple: A Guide for Beginners.

For creating a line, the following method needs to be set up:

beginPath(): This method is to start a new path for a drawing.
moveTo(x, y): This is to move the drawing to the specified points.
lineTo(x, y): This is to draw from the current position to the specified points.
stroke(): This is to draw the line.

HTML Canvas Made Simple: A Guide for Beginners.

2. Rectangle and Square

Rectangle

HTML Canvas Made Simple: A Guide for Beginners.

Square

HTML Canvas Made Simple: A Guide for Beginners.

These following methods are used in creating a rectangle or square:

fillRect: this method is for create rectangle and square only.
clearRect(x, y, width, height): this method is to clear rectangle hence making it transparent.
strokeRect(x, y, width, height): is used to create an outline rectangle or square.
fillStyle: this is used to fill the container of the rectangle or square.
strokeStyle: this method is for add stroke color to an outline rectangle.
roundRect(x, y, width, height, radii): this method is for creating round border rectangle.

3. Circle

HTML Canvas Made Simple: A Guide for Beginners.
These following methods are used in creating a circle:

beginPath(): this method to begin a path.
arc(x, y, radius, startAngle, endAngle, anticlockwise): this is for to create circle where x and y is for center coordinate of the center, radius is the radius of the circle, startAngle and endAngle which is an angle for the circle.

4. Polygon

To create a polygon, you need to determine the sides of the shape, it could be a triangle(3 sides), pentagon (5 sides), hexagon(6 sides) or decagon (10 sides).

HTML Canvas Made Simple: A Guide for Beginners.

These following methods are used in creating a circle:

beginPath(): this method is to create a new shape.
closePath(): this method is to end the shape.
cx: its value for the center of x co-ordinates.
cy: its value specifies the center for y co-ordinates.
radius: radius of the shape.

To get the angle, you have to calculate with this formula by dividing the circle into two;

angle = 2π/ n

Copier après la connexion

où π vaut 3,14 ; n est le nombre de côtés. Vous devez également moins π/2 pour obtenir la position de la forme de haut en bas.
HTML Canvas Made Simple: A Guide for Beginners.

HTML Canvas Made Simple: A Guide for Beginners.

? Texte avec

HTML Canvas Made Simple: A Guide for Beginners.

Pour créer du texte, les méthodes suivantes sont utilisées :

police : pour spécifier la taille de la police et la famille de polices.
fillStyle : il s'agit d'ajouter de la couleur au texte.
fillText : ceci dessine un texte rempli.
StrokeText : cela dessine un texte de contour
createLinearGradient ou createRadialGradient : pour ajouter des dégradés au texte
textAlign : pour définir le texte horizontalement

HTML Canvas Made Simple: A Guide for Beginners.