Programmation des compétences du didacticiel _html5 de l'API HTML5 Canvas-Tutoriel H5-php.cn

Copier le code

Le code est le suivant :

Rejoignez Canvas

Copier le code

Le code est le suivant :

//Obtenir l'élément Canvas et son contexte de dessin var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");
//Utiliser des coordonnées absolues pour créer un chemin
context.beginPath( );
context.moveTo(70, 140);
context.lineTo(140, 70);
//Dessinez cette ligne sur Canvas
context.stroke();

Transformer

Le même effet que ci-dessus peut être obtenu grâce à une transformation (zoom, translation, rotation), etc.

Dessinez des lignes diagonales en utilisant la transformation

Copier le code

Le code est le suivant :

//Obtenir l'élément Canvas et son contexte de dessin
var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");
//Enregistrer l'état actuel du dessin
context.save ();
//Déplacez le contexte de dessin en bas à droite
context.translate(70, 140);
//En utilisant l'origine comme point de départ, tracez le même segment de ligne qu'avant
context.beginPath();
context .moveTo(0, 0);
context.lineTo(70, -70);
context.stroke();

context.restore();

Chemin

Les chemins de l'API HTML5 Canvas représentent n'importe quelle forme que vous souhaitez restituer.

beginPath() : quel que soit le type de graphique que vous commencez à dessiner, la première chose à appeler estbeginPath. Cette fonction simple ne prend aucun paramètre et est utilisée pour informer le canevas qu'il est sur le point de commencer à dessiner un nouveau graphique.

moveTo(x,y) : déplace la position actuelle vers les nouvelles coordonnées cibles (x,y) sans dessiner.

lineTo(x,y) : non seulement déplace la position actuelle vers les nouvelles coordonnées cibles (x,y), mais trace également une ligne droite entre les deux coordonnées.

closePath() : Cette fonction se comporte beaucoup comme lineTo. La seule différence est que closePath utilisera automatiquement les coordonnées de départ du chemin comme coordonnées cibles. Il informe également le canevas que la forme actuellement dessinée est fermée ou forme une zone complètement fermée, ce qui est très utile pour les futurs remplissages et traits.

Dessinez une canopée de pins

Copier le code

Le code est le suivant :

function createCanopyPath(context) {
// Dessinez la canopée des arbres
context.beginPath();

context.moveTo(-25, -50);
context.lineTo(-10, -80);
context.lineTo(-20, -80);
context.lineTo( -5, -110);
context.lineTo(-15, -110);

//Les sommets de l'arbre
context.lineTo(0, -140);

context.lineTo(15, -110);
context.lineTo(5, -110);
context.lineTo(20, -80);
context.lineTo(10, - 80);
context.lineTo(25, -50);
// Relier le point de départ, chemin fermé
context.closePath();
}

function drawTrails() {
var canvas = document.getElementById('diagonal');
var context = canvas.getContext('2d');

context.save();
context.translate(130, 250);

//Créer un chemin représentant la canopée
createCanopyPath(context);

// Dessiner le chemin actuel
context.stroke();
context.restore();
}

window.addEventListener("load", drawTrails, true

Style de trait

Utilisez le mode Trait pour rendre la couronne de l'arbre plus réaliste.

Copier le codeLe code est le suivant :

//Élargir la ligne
context .lineWidth = 4;
//Le point commun du chemin lisse
context.lineJoin = 'round';
//Color
context.strokeStyle = '#663300';
//Dessin du chemin actuel
context.Stroke();

Style de remplissage

context.fillStyle = "#339900"; contexte.fill();

Dessinez un rectangle

On ajoute un tronc à l'arbre

context.fillStyle = '#663300'; context.fillRect(-5, -50, 10, 50);

Dessiner une courbe

Copier le code

Le code est le suivant :

context.save();
context.translate(-10, 350);
context.beginPath();

// La première courbe s'incurve vers le haut vers la droite
context.moveTo(0, 0);
context.quadraticCurveTo(170, -50, 260, -190);

//Courbe en bas à droite
context.quadraticCurveTo(310, -250, 410, -250);

// Tracez le chemin avec un large trait marron
context.StrokeStyle = '#663300';
context.lineWidth = 20;
context.Stroke();

// Restaurer l'état précédent du canevas
context.restore();

Insérer des images dans Canvas

Vous devez attendre que l'image soit complètement chargée avant de pouvoir opérer dessus. Les navigateurs chargent généralement les images de manière asynchrone lorsque le script de page est exécuté. Si vous essayez de restituer l'image sur le canevas avant qu'elle ne soit complètement chargée, le canevas n'affichera aucune image. Par conséquent, une attention particulière doit être accordée à ce que l'image soit chargée. .

Copier le code

Le code est le suivant :

// Charger l'image
var bark = new Image();
bark.src = "bark.jpg";

// Une fois l'image chargée, appelez la fonction de dessin
bark.onload = function () {
drawTrails();
}

Afficher l'image :

//Remplir avec un motif d'arrière-plan comme arrière-plan du tronc d'arbre context.drawImage(bark, -5, -50, 10, 50);

Dégradé

L'utilisation des dégradés nécessite trois étapes :

(1) Créer un objet dégradé

(2) Définissez la couleur de l'objet dégradé et spécifiez la méthode de transition

(3) Définir le dégradé pour le style de remplissage ou le style de trait en fonction du contexte

Copiez le code

Le code est le suivant :

// Créez un trois texture de tronc d'arbre dimensionnel Ordre du dégradé horizontal
var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);

//Le bord gauche du tronc est généralement marron
trunkGradient.addColorStop(0, '#663300');

// La couleur de la partie centrale gauche du tronc doit être discutée
trunkGradient.addColorStop(0.4, '#996600');

//La couleur sur le bord droit doit être plus foncée
trunkGradient.addColorStop(1, '#552200');

// Remplir le tronc avec un dégradé
context.fillStyle = trunkGradient;
context.fillRect(-5, -50, 10, 50);
// Créer un dégradé vertical pour remplir le tronc avec la canopée Ombre sur le tronc de l'arbre
var canopyShadow = context.createLinearGradient(0, -50, 0, 0);
// Le point de départ du dégradé de projection est noir avec une transparence de 50%
canopyShadow.addColorStop(0, ' rgba(0, 0, 0, 0.5)');
// La direction est verticalement vers le bas et devient rapidement complètement transparente sur une courte distance.
// au-delà de cette longueur. Projection
canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');

// Remplissez le tronc d'arbre avec le dégradé de projection
context.fillStyle = canopyShadow;
context.fillRect(-5, -50, 10, 50);

Image de fond

Copier le code

Le code est le suivant :

// Charger l'image

var gravel = new Image();

gravel.src = "gravel.jpg";
gravel.onload = function () {
drawTrails();
}

//Remplacez la ligne marron épaisse par une image d'arrière-plan
context.StrokeStyle = context.createPattern(gravel, 'repeat');
context.lineWidth = 20;
context.Stroke() ;

Le deuxième paramètre de context.createPattern est un marqueur de répétabilité, et vous pouvez choisir la valeur appropriée dans le tableau 2-1.

Zoomer

Fonction de mise à l'échelle context.scale(x,y) : x et y représentent respectivement les valeurs dans les dimensions x et y. Lorsque chaque paramètre affiche une image sur le canevas, il est transmis la quantité par laquelle l'image doit être agrandie (ou réduite) sur l'axe de la direction. Si la valeur x est 2, cela signifie que tous les éléments de l'image dessinée deviendront deux fois plus larges. Si la valeur y est 0,5, l'image dessinée deviendra deux fois moins haute qu'auparavant.

Copier le code

Le code est le suivant :

// À X=130 , Y= Dessinez le premier arbre à 250
context.save();
context.translate(130, 250);
drawTree(context);
context.restore();

// Dessinez le deuxième arbre à X=260, Y=500
context.save();
context.translate(260, 500);

//Agrandissez la hauteur et la largeur du deuxième arbre à 2 fois la valeur d'origine
context.scale(2, 2);
drawTree(context);
context.restore();

Rotation

Faire pivoter l'image

Copier le code

Le code est le suivant :

context.save();
//Le paramètre d'angle de rotation est en radians
context.rotate(1.57);
context.drawImage(myImage, 0, 0, 100, 100);

context.restore();

Une façon d'utiliser la transformation

Copier le code

Le code est le suivant :

// Enregistrer l'état actuel
contexte .save();

// La valeur X augmente à mesure que la valeur Y augmente. À l'aide de la transformation d'étirement,
// vous pouvez créer un arbre incliné utilisé comme ombre
// Après avoir appliqué la transformation, tout les coordonnées sont Multiplier par matrice
context.transform(1, 0,
-0.5, 1,
, 0);

// Dans la direction de l'axe Y, modifiez la hauteur de l'ombre à 60 % de la valeur d'origine
context.scale(1, 0.6);

// Remplir le tronc de noir avec une transparence de 20%
context.fillStyle = 'rgba(0, 0, 0, 0.2)';
context.fillRect(-5, -50, 10, 50);≪/p>

//Redessinez l'arbre en utilisant l'effet d'ombre existant
createCanopyPath(context);
context.fill();

//Restaurer l'état précédent du canevas
context.restore();

Texte

context.fillText(text,x,y,maxwidth) : contenu du texte, x,y spécifie la position du texte, maxwidth est un paramètre facultatif, limitant la position du texte.
context.StrokeText(text,x,y,maxwidth) : contenu du texte, x,y spécifie la position du texte, maxwidth est un paramètre facultatif, limitant la position du texte.

Copier le code

Le code est le suivant :

// Dessiner du texte sur toile
context.save();

//La taille de la police est de 60 et la police est Impact
context.font = "60px impact";

//Couleur de remplissage
context.fillStyle = '#996600';
//Center
context.textAlign = 'center';

//Dessiner du texte
context.fillText('Happy Trails!', 200, 60, 400);
context.restore();

Ombre

Les ombres peuvent être contrôlées via plusieurs propriétés de contexte globales

属性	值	备注
shadowColor	任何CSS中的颜色值	可以使用透明度（alpha）
shadowOffsetX	像素值	值为正数，向右移动阴影;为负数，向左移动阴影
shadowOffsetY	像素值	值为正数，向下移动阴影;为负数，向上移动阴影
shadowBlur	高斯模糊值	值越大，阴影边缘越模糊

Copier le code

Le code est le suivant :

// Couleur noir, 20 % transparence
context.shadowColor = 'rgba(0, 0, 0, 0.2)';

// Déplacer 15px vers la droite et 10px vers la gauche
context.shadowOffsetX = 15;
context.shadowOffsetY = -10;

// Ombre légèrement floue
context.shadowBlur = 2;

Données pixels

context.getImageData(sx, sy, sw, sh) : sx, xy déterminent un point, sw : largeur, sh : hauteur.

Cette fonction renvoie trois attributs : largeur combien de pixels dans chaque ligne hauteur combien de pixels dans chaque colonne

Groupe de données de valeurs RGBA (valeur rouge, vert, bleu et transparence) avec chaque pixel obtenu à partir de Canvas.

context.putImageData(imagedata,dx,dy) : permet aux développeurs de transmettre un ensemble de données d'image. dx et dy sont utilisés pour spécifier le décalage. Si elle est utilisée, la fonction passera à la position spécifiée du canevas. 🎜>

Affichez les données de pixels entrantes.

canvas.toDataUrl : les données actuellement présentées sur le canevas peuvent être obtenues par programme. Les données obtenues sont enregistrées au format texte et le navigateur peut les analyser en une image.