Résumé des 24 compétences de base du didacticiel Knowledge

Résumé des 24 compétences de base du didacticiel Knowledge_html5 sur Canvas

WBOY

Libérer： 2016-05-16 15:47:07

original

1226 Les gens l'ont consulté

Nous résumons maintenant les points de connaissance de Canvas comme suit pour une référence facile à tout moment.

1. Rectangle rempli fillRect(x,y,width,height);

2. Dessinez une bordure rectangulaire StrokeRect(x,y,width,height);

3. Effacer le rectangle clearRect(x,y,width,height);

4. Style de remplissage fillStyle="red"; Le style peut être une couleur, un dégradé et une image.

5. Style de trait StrokeStyle="red";

6. La largeur de la ligne de trait lineWidth=4;

7. Forme de fin de ligne lineCap="butt"; par défaut c'est bout à bout ;

8. Style d'intersection de ligne lineJoin="miter"; mitre(coin pointu)/round(coin arrondi)/bevel(bevel), coin pointu par défaut ;

9. Commencez à dessiner le cheminbeginPath();

10. Terminer le chemin closePath(); Après avoir créé le chemin, si vous souhaitez tracer une ligne connectée au point de départ du chemin, vous pouvez appeler closePath();

11. Dessinez un arc arc(x,y,radius,startAngle,endAngle,true/false);

12. Dessinez un arc arcTo(x1,y1,x2,y2,radius) Dessinez un arc en partant du point précédent, se terminant à x2, y2, et passant par lui avec le rayon donné. x1,y1;

13. moveTO(x,y); Déplacez le curseur de dessin vers (x, y) sans tracer de ligne

14. lineTo(x,y); Tracez une ligne droite à partir du point précédent

15. Courbe quadratique de Bézier : quadraticCurveTo(cx,cy,x,y); Tracez une courbe quadratique commençant à partir du point précédent et se terminant à x, cx, cy sont utilisés comme points de contrôle. .

16. Courbe de Bézier cubique : bezierCurveTo(cx1,cy1,cx2,cy2,x,y) ; Tracez une courbe quadratique partant du point précédent et se terminant en x, y, cx1, cy1 et cx2,cy2 comme points de contrôle.

17. rect(x,y,width,height);Dessinez un rectangle à partir du point x, y La largeur et la hauteur sont spécifiées respectivement par width et height. Cette méthode dessine un chemin rectangulaire et non une forme indépendante.

18. Dessiner du texte :

　(1) Remplir le texte : fillText("hello",x,y,width); width est la largeur maximale facultative en pixels. Si le texte est plus grand que la largeur maximale, le texte sera réduit pour s'adapter à la largeur maximale.
　(2) Trait de texte : StrokeText("hello",x,y,width);width est la largeur maximale facultative en pixels.
　(3) Style de texte : font="bold 14px Arial";
　(4) Alignement horizontal du texte : textAlign='start'; // début, fin, gauche, droite, centre. Valeur par défaut : démarrer. Alignez sur l'axe vertical avec le point de départ (x, y) du texte comme point de base.
　(5) Alignement vertical du texte : textBaseline='alphabetic'; //haut, suspendu, milieu, alphabétique, idéographique, bas. Valeur par défaut : alphabétique. Alignez sur l'axe horizontal avec le point de départ (x, y) du texte comme point de base.
(6) Largeur du texte : var text="hello"; var length=context.measureText(text); le paramètre text est le texte à dessiner

19.Transformation

　(1) rotate(angle) : Faites pivoter l'angle de l'image autour de l'origine.
Vous pouvez également utiliser transform(Math.cos(angle*Math.PI/180),Math.sin(angle*Math.PI/180),-Math.sin(angle*Math.PI/180),Math . cos(angle*Math.PI/180),0,0);
　(2) scale(x,y) : redimensionner l'image. Vous pouvez également utiliser transform(x,0,0,y,0,0);
　(3) translation(x,y) : Déplacez l'origine des coordonnées vers x,y Après avoir exécuté cette transformation, les coordonnées 0, 0 deviendra le point précédemment représenté par x, y. Vous pouvez également utiliser transform(1,0,0,1,x,y);
　(4) transform(, , ,,x, y ) ;
　(5) setTransform(, , ,,x, y);Réinitialisez la matrice de transformation à l'état par défaut, puis appelez transform() ;

20. Combinaison graphique

Copier le code

Le code est le suivant :

context.fillStyle="blue";
context.fillRect(10,10,100,100);
context.globalCompositeOperation='lighter'; Les valeurs facultatives sont comme dans /* */.
context.fillStyle="red";
context.arc(110,60,50,0,Math.PI*2,false);
context.fill();
/*
source-over (valeur par défaut) :
destination-over : dessiner un nouveau graphique sous le graphique d'origine
source-in : effectuer une opération in entre le nouveau graphique et le graphique d'origine, et afficher uniquement la différence entre le nouveau graphique et le graphique original Parties superposées des graphiques
destination-in : Les graphiques originaux et les nouveaux graphiques fonctionnent comme dans, et seules les parties des nouveaux graphiques qui chevauchent les graphiques originaux sont affichées
source-out : les nouveaux graphiques et les graphiques originaux sont exploités comme une opération de sortie, affiche uniquement les parties du nouveau graphique qui ne chevauchent pas le graphique d'origine
destination-out : effectue une opération de sortie sur le nouveau graphique et l'original graphique, afficher uniquement les parties du nouveau graphique qui ne chevauchent pas le graphique d'origine
source- au sommet : dessinez uniquement la partie de la nouvelle forme qui chevauche la forme d'origine et la forme d'origine qui ne se chevauche pas
destination -atop : dessinez uniquement la partie de la forme originale qui est recouverte par la nouvelle forme et les autres parties de la nouvelle forme
plus claires : la forme originale et la nouvelle forme sont dessinées, et les parties qui se chevauchent sont colorées >*/

21. Dessinez des ombres graphiques

Copier le code

Le code est le suivant :

context.shadowOffsetX=10 ; //Shadow Le déplacement horizontal de l'ombre

context.shadowOffsetY=10; //Le déplacement vertical de l'ombre

context.shadowColor='rgba(100,100,100,0.5)' //La couleur de l'ombre
context.shadowOffsetY=10; 🎜>context.shadowBlur=7; //Plage d'ombre floue

22. Dessinez, carrelez et recadrez des images

Copier le code

Le code est le suivant :

context.drawImage(image, x,y );

context.drawImage(image,x,y,w,h);

context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);sx ,sy et sw, sh sont les coordonnées de départ et la hauteur de la zone copiée de l'image source, dx, dy et dw, dh sont les coordonnées cibles et la hauteur de la zone copiée.
context.createPattern(image,type); Tuiles d'image, les paramètres peuvent être : no-repeat,repeat-x,repeat-y,repeat;
context.clip(); //Fonction de recadrage

Exemple :

Copier le code

Le code est le suivant :

image=new Image() ; // Créer un objet Image

image.src="../images/wukong.gif";

var test=context.createPattern(image,'repeat-y');//createPattern définit le carrelage effect,
context.fillStyle=test;
context.fillRect(0,0,400,400);
image.onload=function() { //Le but de cette méthode est d'empêcher le traitement de l'image si l'image est un fichier image réseau relativement volumineux. Vous ne verrez pas l'image tant que tout n'est pas chargé, vous pouvez donc dessiner pendant le chargement.
drawImg(context,image);
}
function drawImg(context,image){
//Dessiner l'image originale
context.drawImage(image,10,10,125,125);
//Agrandissement local
context.drawImage(image,20,0,90,100,150,10,125,125);
context.rect(20,20,80,80);
context.clip();
context.drawImage(image,0,0,200,200);
}

23. Enregistrer et restaurer

contex.save(); Enregistre l'état actuel dans la pile. Remarque : Seuls les paramètres et les transformations des graphiques dessinés sont enregistrés, et non le contenu des graphiques dessinés. context.restore(); récupérer l'état graphique précédemment enregistré dans la pile

Occasions applicables :

(1) Déformation de l'image ou des graphiques
(2) Recadrage de l'image
(3) Lors du changement les propriétés du contexte graphique : fillStyle, font, globalAlpha, globalComposite-Operation, lineCap, lineJoin, lineWidth, miterLimit, shadowBlur, shadowColor,
shadowOffsetX, shadowOffsetY, StrokeStyle, textAlign, textBaseline

24. Dégradé linéaire

Copier le code

Le code est le suivant :

var g=context.createLinearGradient (xStart, yStart,xEnd,yEnd);

var g1=context.createRadialGradient(xStart,yStrat,radiusStrat,xEnd,yEnd,radiusEnd);

g.addColorStop(0,'red');
g.addColorStop (0,'green');
context.fillStyle=g;
context.fillRect(0,0,200,200);