<canvas></canvas> est une nouvelle balise en HTML5, utilisée pour dessiner des graphiques. En fait, cette balise est la même que les autres balises. Sa particularité est que cette balise peut obtenir un objet CanvasRenderingContext2D, que l'on peut utiliser des scripts JavaScript. pour contrôler cet objet pour le dessin.
<canvas></canvas> est simplement un conteneur pour dessiner des graphiques. En plus des attributs tels que l'identifiant, la classe et le style, il possède également des attributs de hauteur et de largeur. Il y a trois étapes principales pour dessiner sur l'élément <canvas>> :
<canvas> , qui est un objet Canvas ; Voici un exemple simple de dessin <canvas> :
<!DOCTYPE html><html lang=fr><head> <meta charset=UTF-8> <title>Démonstration de dessin sur toile</title> <style type=text/css> #canvas{ border: 1px solid #ADACB0; affichage : bloc ; marge : 20px auto ; } </style></head><body> <canvas id=canvas width=300 height=300> Votre navigateur ne prend pas encore en charge Canvas </canvas></body><script type=text/javascript> var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); et point final context.moveTo(10,10); context.lineTo(200,200); //Définir le style context.lineWidth = 2; #F5270B; //Dessiner contexte.AVC();</script></html>S'il n'est pas spécifié via moveTo(), le point de départ de lineTo() est basé sur le point précédent. Par conséquent, si vous devez resélectionner le point de départ, vous devez transmettre la méthode moveTo(). Si vous devez définir des styles pour différents segments de ligne, vous devez rouvrir un chemin via context.beginPath(). Voici un exemple :
<script type=text/javascript> var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //Définir le point de départ et le point final de l'objet context.beginPath(); 100 100 ); contexte .lineTo(700 100); contexte.lineTo(700 400); contexte.lineWidth = 2 ; #F5270B; //Dessiner context.stroke(); context.beginPath(); context.moveTo(100,200); //L'effet du remplacement de moveTo par lineTo est ici le même context.lineTo(600,200); ) ; //Si la couleur de StrokeStyle a une nouvelle valeur, elle écrasera la valeur définie ci-dessus. //Si lineWidth n'a pas de nouvelle valeur, elle sera affichée en fonction de la valeur définie ci-dessus. contexte.AVC();</script >
Dessinez les rectangles rect(), fillRect() et StrokeRect()
<script type=text/javascript> var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //Utiliser la méthode rect context.rect(10,10,190,190); . fillStyle = #3EE4CB; contexte.strokeStyle = #F5270B contexte.fill(); //Utilisez la méthode fillRect context.fillStyle = #1424DE; context.fillRect(210,10,190,190); //Utilisez la méthode StrokeRect context.StrokeStyle = #F5270B; en même temps Méthode context.fillStyle = #1424DE; #F5270B ; contexte.strokeRect(610,10,190,190); contexte.fillRect(610,10,190,190);</script>
Deux points doivent être expliqués ici : le premier point est l'ordre avant et après que Stroke() et Fill() soient dessinés plus tard, alors lorsque la bordure du trait est plus grande, la bordure dessinée par Stroke(). sera évidemment couvert. La moitié ; 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 de rgba(255,0,0,0.2).
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 : la position de départ du rectangle clair ainsi que la largeur et la longueur du rectangle.
Dans le code ci-dessus, ajoutez à la fin du dessin le graphique :
contexte.clearRect(100,60,600,100);
Les effets suivants peuvent être obtenus :
Dessine une étoile à cinq branchesEn analysant l'étoile à cinq branches, nous pouvons déterminer les règles des coordonnées de chaque sommet. Une chose à noter ici est : dans le canevas, la direction de l'axe Y est vers le bas.
Le code correspondant est le suivant :
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.beginPath(); //Définir les coordonnées d'un sommet et formuler un chemin basé sur le sommet pour (var i = 0; i < 5; i++ ) { contexte.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200, -Math.sin((18+i*72)/180*Math.PI)*200+200); contexte.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+ 200, -Math.sin((54+i*72)/180*Math.PI)*80+200 } context.closePath(); //Définit le style de bordure et la couleur de remplissage context.lineWidth=3; context.fillStyle = #F6F152;Effet final :
Propriétés de la ligneEn plus de l'attribut lineWidth utilisé ci-dessus, les lignes ont également les attributs suivants :
La propriété lineCap définit ou renvoie le style de la fin de ligne à la fin de la ligne. Elle peut prendre les valeurs suivantes :
La propriété lineJoin définit ou renvoie le type de coin créé lorsque deux lignes se rencontrent. Elle peut prendre les valeurs suivantes :
La propriété miterLimit définit ou renvoie la longueur maximale de l'onglet (la valeur par défaut est 10). La longueur d'onglet fait référence à la distance entre les coins intérieur et extérieur où deux lignes se rencontrent. miterLimit n'est valide que lorsque l'attribut lineJoin est miter.
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //Test de la propriété lineCap //Définit la ligne de base pour une observation facile context.moveTo(10,10); . moveTo(200,10); contexte.lineTo(200,200); contexte.lineWidth=1; contexte.beginPath(); contexte.moveTo(10,50); contexte.lineTo(200,50); contexte.lineCap=butt; contexte.lineWidth=10; ; contexte.moveTo(10,100); contexte.lineTo(200,100); contexte.lineCap=round; contexte.AVC(); //carré contexte.beginPath(); contexte.moveTo(10,150); contexte.lineCap=square; contexte.lineWidth=10; Propriété linJoin //miter context.beginPath(); context.moveTo(300,50); context.lineTo(300,150); context.lineJoin=miter; context.lineWidth=10; contexte.lineTo(400,150); contexte.lineJoin=round; contexte.lineWidth=10; contexte.beginPath(); contexte.moveTo(500,50); contexte.lineTo(650,100); contexte.lineJoin=bevel; contexte.lineWidth=10; Attribut miterLimit context.beginPath(); context.moveTo(700,50); contexte.lineTo(850,100); contexte.lineTo(700,150); contexte.lineJoin=miter; contexte.miterLimit=2;
Les effets des différentes valeurs pour chaque attribut sont les suivants :
Style de remplissageEn plus de définir la couleur, les fillStyle et StrokeStyle utilisés précédemment peuvent également définir d'autres styles de remplissage. Ici, nous prenons fillStyle comme exemple :
dégradé linéaireÉtapes d'utilisation
(1) var grd = context.createLinearGradient( xstart , ystart, xend , yend ) crée un dégradé linéaire et définit les coordonnées de début et de fin ;
(2) grd.addColorStop(stop, color) ajoute de la couleur au dégradé linéaire, stop est une valeur de 0~1 ;
(3) context.fillStyle=grd sera attribué au contexte.
gradient radialCette méthode est similaire à la méthode du gradient linéaire, sauf que les paramètres reçus lors de la première étape sont différents.
var grd = context.createRadialGradient(x0, y0, r0, x1, y1, r1); reçoit les coordonnées et le rayon du centre du cercle de départ et les coordonnées et le rayon du centre du cercle de fin.
Remplissage bitmapcreatePattern( img , repeat-style) est rempli d'images et le style de répétition peut être répétition, répétition-x, répétition-y ou non-répétition.
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //Dégradé linéaire var grd = context.createLinearGradient(10, 10, 100, 350); grd.addColorStop(0.25,#FC0F31); grd.addColorStop(0.5,#ECF811); grd.addColorStop(0.75,#2F0AF1); grd.addColorStop(1,#160303); context.fillStyle = grd; context.fillRect(10,10,100,350); grd = contexte.createRadialGradient(325, 200, 0, 325, 200, 200); grd.addColorStop(0,#1EF9F7); grd.addColorStop(0.25,#FC0F31); ; grd.addColorStop(1,#160303); context.fillStyle = grd; context.fillRect(150,10,350,350); //Remplissage de bitmap var bgimg = new Image(); (){ var motif = contexte.createPattern(bgimg, répéter); contexte.fillStyle = motif; contexte.StrokeStyle=#F20B0B; contexte.fillRect(600, 100, 200 200) ;L'effet est le suivant :
Transformation graphiqueTraduction : context.translate(x,y), les paramètres reçus sont la translation de l'origine par x dans le sens de l'axe x et la translation de y dans le sens de l'axe y.
Mise à l'échelle : context.scale(x,y), les paramètres reçus sont que l'axe de coordonnées x est mis à l'échelle en fonction de la proportion x et que l'axe de coordonnées y est mis à l'échelle en fonction de la proportion y.
Rotation : context.rotate(angle), le paramètre reçu est l'angle de rotation de l'axe des coordonnées.
Il convient de noter qu'après avoir modifié les graphiques, le dessin suivant suivra l'état précédent, donc si vous devez revenir à l'état initial, vous devez utiliser context.restore(); context.save(); état actuel :
var toile = document.getElementById(canvas); var contexte = toile.getContext(2d); //translate() contexte.save(); (0,0,200,200); contexte.restore(); //scale() contexte.save(); #F5270B; contexte.scale(0.5,0.5); contexte.fillRect(500,50,200,200); //rotate() contexte.save(); .PI / 4); contexte.fillRect(300,10,200,200);
L'effet est le suivant :
Une autre chose liée à la transformation graphique est : la transformation matricielle : context.transform(a, b, c, d, e, f, g). La signification des paramètres est la suivante :
une mise à l'échelle horizontale (par défaut 1)
b inclinaison horizontale (par défaut 0)
c inclinaison verticale (par défaut 0)
d mise à l'échelle verticale (par défaut 1)
e déplacement horizontal (la valeur par défaut est 0)
f déplacement vertical (la valeur par défaut est 0)
Les lecteurs peuvent vérifier eux-mêmes les effets de chaque paramètre, et je ne les présenterai pas un par un ici.
dessiner une courbeIl existe quatre fonctions pour dessiner des courbes, à savoir :
context.arc(x,y,r,sAngle,eAngle,counterclock) utilisé pour créer des arcs/courbes (utilisé pour créer des cercles ou des cercles partiels). La signification des paramètres reçus :
Paramètres | Signification |
:--- |:---|
| x | coordonnée x du centre du cercle |
|y|Coordonnée Y du centre du cercle|
|r|rayon du cercle|
|sAngle|Angle de départ en radians (la position à trois heures du cercle de l'arc est 0 degré)|
|eAngle|Angle final en radians|
|dans le sens inverse des aiguilles d'une montre|Facultatif. Spécifie si le tracé doit être dessiné dans le sens inverse des aiguilles d'une montre ou dans le sens des aiguilles d'une montre. False = dans le sens des aiguilles d'une montre, vrai = dans le sens inverse des aiguilles d'une montre |
Voici quelques exemples de plusieurs fonctions arc() :
var canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); context.StrokeStyle = #F22D0D; context.lineWidth = 2; 40 ,0,2*Math.PI); context.Stroke(); //Dessine un demi-cercle context.beginPath(); context.arc(200,100,40,0,Math.PI); context.Stroke(); //Dessine un demi-cercle dans le sens inverse des aiguilles d'une montre context.beginPath(); ; context.Stroke(); //Dessine un demi-cercle fermé context.beginPath(); contexte.arc(400,100,40,0,Math.PI); contexte.closePath();
L'effet est le suivant :
context.arcTo(x1,y1,x2,y2,r); Crée un arc/courbe sur le canevas entre deux tangentes. La signification des paramètres reçus :
| paramètre | signification |
|---|---|
| x1 | Coordonnée x du point de contrôle de l'arc |
| y1 | La coordonnée y du point de contrôle de l'arc |
| x2 | coordonnée x du point final de l'arc |
| y2 | La coordonnée y du point final de l'arc |
| r | rayon d'arc |
Ce qu'il faut noter ici, c'est que le point de départ de la courbe dessinée par la fonction arcTo doit être défini via la fonction moveTo(). La fonction arcTo est utilisée ci-dessous pour dessiner un rectangle arrondi :
function createRoundRect(context, x1, y1, width, height, radius) { // Déplacer vers le coin supérieur gauche context.moveTo(x1 + radius, y1); // Ajouter un segment de ligne connecté au coin supérieur droit context.lineTo (x1 + width - radius, y1); //Ajouter un arc context.arcTo(x1 + width, y1, x1 + width, y1 + radius, radius); // Ajouter un segment de ligne connecté au coin inférieur droit context.lineTo(x1 + width, y1 + height - radius); // Ajouter un arc context.arcTo(x1 + width, y1 + height, x1); + width - radius, y1 + height , radius); // Ajoute un segment de ligne connecté au coin inférieur gauche context.lineTo(x1 + radius, y1 + height); Ajouter un arc context.arcTo(x1, y1 + height, x1, y1 + height - radius, radius); // Ajouter un segment de ligne connecté au coin supérieur gauche context.lineTo(x1, y1 + radius); un arc Arc context.arcTo(x1, y1, x1 + radius, y1, radius context.closePath( } //); Récupère l'objet DOM correspondant à l'élément canvas var canvas = document.getElementById('mc'); // Récupère l'objet CanvasRenderingContext2D dessiné sur le canevas var context = canvas.getContext('2d'); StrokeStyle = #F9230B; createRoundRect(contexte, 30, 30, 400, 200, 50 ); contexte.AVC();L'effet est le suivant :
context.quadraticCurveTo(cpx,cpy,x,y); Dessinez une courbe de Bézier quadratique. Les significations des paramètres sont les suivantes :
| paramètre | signification |
|---|---|
| cpx | La coordonnée x du point de contrôle de Bézier |
| copier | La coordonnée y du point de contrôle de Bézier |
| x | Coordonnée x du point final |
| oui | coordonnée y du point final |
Le point de départ de la courbe est le dernier point de la trajectoire actuelle. Si le chemin n'existe pas, utilisez les méthodes beginPath() et moveTo() pour définir le point de départ.
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); Dessinez une courbe de Bézier cubique avec les paramètres suivants :
| paramètre | signification |
|---|---|
| cp1x | Coordonnée x du premier point de contrôle de Bézier |
| cp1y | La coordonnée y du premier point de contrôle de Bézier |
| cp2x | Coordonnée x du deuxième point de contrôle de Bézier |
| cp2y | La coordonnée y du deuxième point de contrôle de Bézier |
| x | Coordonnée x du point final |
| oui | coordonnée y du point final |
Il existe principalement trois propriétés et trois méthodes liées au rendu du texte :
| propriété | décrire |
|---|---|
| fonte | Définit ou renvoie les propriétés de police actuelles du contenu du texte |
| texteAligner | Définit ou renvoie l'alignement actuel du contenu du texte |
| texteBaseline | Définit ou renvoie la ligne de base du texte actuelle utilisée lors du dessin du texte |
| méthode | décrire |
|---|---|
| remplirTexte() | Dessiner du texte rempli sur la toile |
| texteAVC() | Dessiner du texte sur la toile (pas de remplissage) |
| mesurerTexte() | Renvoie un objet contenant la largeur de texte spécifiée |
L'utilisation de base des propriétés et méthodes ci-dessus est la suivante :
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.font=bold 30px Arial; //Définir le style context.StrokeStyle = #1712F4; context.StrokeText(Bienvenue sur mon blog ! , 30 100 ); contexte.font=bold 50px Arial ; var grd = contexte.createLinearGradient( 30 , 200, 400, 300 );//Définir le style de remplissage dégradé grd.addColorStop(0,#1EF9F7); grd.addColorStop(0.25,#FC0F31); , #2F0AF1); grd.addColorStop(1,#160303); context.fillStyle = grd; context.fillText(Bienvenue sur mon blog !,30,200); .AVC(); contexte.font=gras 20px Arial ; contexte.fillStyle = #F80707; context.textAlign=left; context.fillText(Le texte commence à la position spécifiée, 200,300); context.textAlign=center; context.fillText(Le centre du texte est placé à la position spécifiée, 200,350); .textAlign= right; context.fillText(le texte se termine à la position spécifiée, 200, 400); context.moveTo(10,500); context.lineTo(500,500); context.fillStyle=#F60D0D; context.font=bold 20px Arial; context.textBaseline=top; 10 500 ); contexte.textBaseline=bas ; context.fillText (la position spécifiée est en dessous, 150 500) ; context.textBaseline=middle ; context.fillText (la position spécifiée est au milieu, 300 500) ; #16F643 ; var text = Bienvenue sur mon blog ! ; context.StrokeText(Bienvenue sur mon blog !,10,600); context.StrokeText(La largeur de la chaîne ci-dessus est : +context.measureText(text).width,10,650);
L'effet est le suivant :
Autres propriétés et méthodes Dessin d'ombre :Ajoutons une ombre à l'étoile à cinq branches que nous avons dessinée plus tôt
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.beginPath(); //Définir les coordonnées d'un sommet et formuler un chemin basé sur le sommet pour (var i = 0; i < 5; i++ ) { contexte.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200, -Math.sin((18+i*72)/180*Math.PI)*200+200); contexte.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+ 200, -Math.sin((54+i*72)/180*Math.PI)*80+200 } context.closePath(); //Définissez le style de bordure et la couleur de remplissage context.lineWidth=3; context.fillStyle = #F6F152; context.strokeStyle = #F5270B; shadowOffsetY = 30; contexte.shadowBlur = 2; contexte.fill();L'effet est le suivant :
Combinaison graphique :globalAlpha : définit ou renvoie la valeur alpha ou de transparence actuelle du dessin.
Cette méthode consiste principalement à définir la transparence des graphiques, qui ne sera pas présentée en détail ici.
globalCompositeOperation : définit ou renvoie la manière dont la nouvelle image est dessinée sur l'image existante. Cette méthode a les valeurs d'attribut suivantes :
| valeur | décrire |
|---|---|
| source-over | Afficher l'image source sur l'image cible (par défaut) |
| source-au-dessus | Affiche l'image source au-dessus de l'image de destination. Les parties de l'image source qui se trouvent en dehors de l'image cible sont invisibles |
| source d'entrée | Affichez l'image source dans l'image cible. Seule la partie de l'image source dans l'image de destination sera affichée ; |
| source-out | Affiche l'image source en plus de l'image cible. Seule la partie de l'image source en dehors de l'image de destination est affichée et l'image de destination est transparente |
| destination terminée | Afficher l'image cible sur l'image source |
| destination au sommet | Affiche l'image de destination au-dessus de l'image source. Les parties de l'image cible qui se trouvent en dehors de l'image source sont invisibles |
| destination-dans | Affiche l'image de destination dans l'image source. Seule la partie de l'image cible dans l'image source sera affichée et l'image source est transparente |
| destination-sortie | Affiche l'image cible en plus de l'image source. Seule la partie de l'image cible en dehors de l'image source sera affichée et l'image source est transparente |
| plus léger | Afficher l'image source + l'image cible |
| copie | Afficher l'image source. Ignorer l'image cible |
| xor | Combinez les images source et de destination à l'aide de l'opération XOR |
Voici un petit exemple de la façon dont la combinaison peut être modifiée en un clic :
<!DOCTYPE html><html lang=fr><head> <meta charset=UTF-8> <title>Combinaison graphique</title> <style type=text/css> #canvas{ bordure : affichage solide 1px #1C0EFA ; : bloc ; marge : 20 px auto ; } #boutons{ largeur : 1000 px ; marge : 5px auto ; font-size: 18px; display: block; float: left; margin-left: 20px; } </style></head><body> <canvas id=canvas width=1000 height=800> Votre navigateur n'est pas encore pris en charge canevas </canvas> <div id=buttons> <a href=#>source-over</a> <a href=#>source-atop</a> <a href=#>source-in</a> <a href=#>source-out</a> <a href=#>destination-over</a> <a href=#>destination-atop</a> <a href=#>destination-entrée</a> <a href=#>destination-sortie</a> <a href=#>plus léger</a> <a href=#>copie</a> <a href=#>xor</a> </div></body><script type=text/javascript>window.onload = function(){ draw(source-over); var boutons = document.getElementById(boutons). getElementsByTagName(a); for (var i = 0; i < boutons.length; i++) { boutons[i].onclick = function(){ draw(this.text); }} ; function draw(compositeStyle){ var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.clearRect(0, 0, canvas.width, canvas.height); contexte.font = gras 40px Arial; contexte.textAlign = centre; contexte.textBasedline = milieu; contexte.fillStyle = #150E0E; context.fillText(globalCompositeOperation = +compositeStyle, canvas.width/2, 60); //dessine un contexte triangulaire.fillStyle = #F6082A; globalCompositeOperation = compositeStyle; contexte.fillStyle = #1611F5; contexte.beginPath(); contexte.moveTo(700, 250); contexte.lineTo(1000,750); contexte.lineTo(400, 750); </html>Les lecteurs peuvent cliquer sur l'étiquette pour observer différents effets de combinaison. Les effets sont les suivants :
Zone de détourage :La méthode clip() coupe n'importe quelle forme et taille du canevas d'origine.
Astuce : Une fois que vous avez découpé une zone, tous les dessins ultérieurs sont limités à la zone découpée (aucune autre zone du canevas n'est accessible). Vous pouvez également enregistrer la zone de canevas actuelle en utilisant la méthode save() avant d'utiliser la méthode clip(), et la restaurer à tout moment dans le futur (via la méthode restaurer()).
Voici un exemple d'utilisation d'un cercle pour intercepter un rectangle :
var toile = document.getElementById(canvas); var contexte = toile.getContext(2d); contexte.beginPath(); contexte.fillStyle = #0C0101; contexte.beginPath(); contexte.fillStyle = #FFFDFD; contexte.arc(400,400,100,0,2*Math.PI); contexte.fill(); contexte.beginPath(); contexte.fillStyle = #F60825; 50);
En plus des attributs et méthodes ci-dessus, il existe également les méthodes suivantes :
drawImage() : dessine une image, un canevas ou une vidéo sur le canevas.
toDataURL() : enregistrer les graphiques
isPointInPath() : renvoie vrai si le point spécifié se trouve dans le chemin actuel, faux sinon.
Je ne donnerai pas d’exemples un par un ici.
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.