Dessin de base du canevas HTML5 : dessin d'un rectangle

est une nouvelle balise HTML5, utilisée pour dessiner des graphiques. Cet article présente principalement en détail la méthode de dessin de base pour dessiner des rectangles dans un canevas HTML5.

n'est qu'un conteneur pour dessiner des graphiques. En plus des attributs tels que l'identifiant, la classe, le style, etc., il possède également des attributs de hauteur et de largeur. Il y a trois étapes principales pour dessiner sur l'élément > :

1. Récupérez l'objet DOM correspondant à l'élément la méthode getContext (de l'objet Canvas) pour obtenir un objet CanvasRenderingContext2D

3. Appelez l'objet CanvasRenderingContext2D pour le dessin.

Dessiner des rectangles rect(), fillRect() et StrokeRect()

•context.rect( x , y , width , height ) : définit uniquement le chemin de le rectangle ;

•context.fillRect( x , y , width , height ) : dessine directement un rectangle rempli ;

•context.strokeRect( x , y , width , height ) : dessine directement une bordure rectangulaire ; 🎜 >

Code JavaScript

Copier le contenu dans le presse-papiers

Deux points doivent être expliqués : Le premier point est l'ordre dans lequel Stroke() et fill() sont dessinés plus tard, alors quand la bordure du trait. est plus grand, la moitié de la bordure dessinée par Stroke() sera évidemment couverte ;Deuxième point : lors de la définition de l'attribut fillStyle ou StrokeStyle, vous pouvez le définir via la méthode de configuration "rgba(255,0,0,0.2)". Le dernier paramètre de ce paramètre est la transparence.

Il y en a un autre lié au dessin rectangulaire : effacer la zone rectangulaire : context.clearRect(x,y,width,height).

Les paramètres reçus sont : effacer la position de départ du rectangle ainsi que la largeur et la longueur du rectangle. Dans le code ci-dessus, ajoutez à la fin du dessin les graphiques :

context.clearRect(100,60,600,100);

pour obtenir l'effet suivant :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!