Méthodes d'attributs courantes du canevas HTML5 (introduction)

Ce chapitre vous présente les méthodes d'attributs courantes (introduction) du canevas html5. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

D'abord introduisez la balise 5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b il va sans dire.

La deuxième étape consiste à obtenir l'environnement 2D de Canvas (var ctx = canvasDom.getContext('2d')).

Maintenant, vous voudrez peut-être dessiner quelque chose. Avant de dessiner quelque chose, vous devez déterminer certaines choses, telles que :

　ctx.fillStyle : Il s'agit d'un attribut utilisé pour déterminer la couleur de remplissage. (Avec fill, tout est lié au remplissage)
ctx.StrokeStyle : Il s'agit d'un attribut utilisé pour déterminer le "chemin du stylo" (tout comme une ligne). (Les deux traits sont liés au traçage)
ctx.shadow++ : Celui-ci a 4 propriétés pour définir l'ombre des graphiques dessinés (shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY). eux.
ctx.lineWidth : C'est le plus couramment utilisé des quatre attributs pour définir les styles de ligne (lineCap, lineJoin, lineWidth, miterLimit). Il définit la largeur de la ligne et la valeur est une chaîne avec px.
ctx.font : Ceci permet de définir la taille et le style de police de text(). La valeur peut être "30px" ou "30px Microsoft yahei". En même temps, coopérez avec ctx.textAlign et ctx.baseline pour définir la position d'alignement et la position de base. Dessinez ensuite le texte via ctx.filltext() ou ctx.StrokeText(), et ctx.measureText() renvoie un objet contenant des informations textuelles, telles que la largeur et la hauteur.

Après avoir compris les attributs de base ci-dessus, vous pouvez dessiner quelque chose :

Si vous souhaitez afficher quelque chose, le processus consiste probablement à d'abord créer le chemin (le chemin est invisible), puis ensuite utilisez ctx.fill() ou ctx.stroke pour remplir ou tracer le chemin.

Vous pouvez utiliser ctx.rect(x,y,width,height) ou ctx.arc(x,y,radius,startAngle,endAngle,anticolorwise) pour créer d'abord un chemin, puis remplir ou tracer.

Bien sûr, le rectangle a ctx.fillRect() et ctx.strokeRect() pour créer directement un carré visible. (Circle n'a pas ces deux méthodes)

Enfin, introduisons un tableau noir Eraser-ctx.clearRect(x,y,weight,height), qui est utilisé pour effacer tous les pixels de la boîte.

Afin d'éviter les interférences du chemin précédent, vous pouvez utiliser ctx.beginPath() pour effacer le chemin précédent avant chaque dessin.

Ce qui précède est l'utilisation de base du canevas, parlons de quelques points avancés (yong) (bu) (shang).

Remplissage dégradé d'un style rectangulaire :

var grd = ctx.createLinearGradient(x0,y0,x1,y1);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillstyle = grd;
ctx.fillRect(x,y,w,h);

Cette étape équivaut à prédéfinir un style de dégradé (peut être rempli ou dessiné), puis changer le style en Après prise, remplir ou tracer.

Il existe également createRadialGradient() et addColorStop pour définir le style radial.

Remplissage de médias (photos, vidéos, autres toiles) :　

var img = imgDom;
var pat = ctx.createPattern(img,"repeat");

Ensuite, ce pat peut être donné à ctx.++Style pour remplir ou dessiner une ligne etc.

Il existe quatre types de motifs : répétition (par défaut), répétition-x, répétition-y, non-répétition.

Chemin personnalisé :

Utilisez ctx.moveTo(x,y) pour déplacer le point de départ du chemin vers (x,y) ; puis coopérez avec lineTo( x, y), vous pouvez obtenir le chemin et l'afficher en traçant la ligne.

Bien sûr, si vous souhaitez remplir, mais que le chemin ne peut pas être fermé, vous pouvez utiliser ctx.closePath() pour fermer le chemin puis remplir.

Découpe de toile :

Utilisez ctx.clip() pour couper la toile selon le chemin actuellement fermé. La partie coupée de la toile ne peut pas être utilisée.

Vous pouvez enregistrer la zone actuelle via ctx.save(), puis la restaurer via ctx.restore().

Dessiner un arc :

Dessiner un arc passant par ctx.arcTo(x0,y0,x1,y1,radius) ; déterminer l'arc passant par deux points et le rayon ); , pour obtenir le chemin, puis remplissez-le ou tracez-le selon vos besoins.

Jugez si le point est dans le chemin :

ctx.isPointInPath(); renvoie une valeur booléenne, rien à dire.

Il existe une sorte de courbe appelée Bézier :

Utilisez d'abord ctx.moveTo() pour vous déplacer jusqu'au point de départ.

　ctx.quadraticCurveTo(c1x,c1y,edx,edy); courbe de Bézier utilisant le point de départ et un point de contrôle plus le point final

　ctx.beizierCurveTo(c1x,c1y,c2x, c2y ,edx,edy); courbe de Bézier tracée à l'aide de deux points de contrôle.

Conversion graphique :

　ctx.scale(w,h); Zoomer en w>1 signifie zoomer en largeur, h signifie en hauteur.

ctx.rotate(r); r est l'unité radian, par exemple 20 degrés : 20*Math.PI/180. dans le sens des aiguilles d'une montre.

　ctx.translate(x,y) définit la position de (0,0) sur le canevas, et (x,y) est la position actuelle de (0,0).

　ctx.transform(a,b,c,d,e,f); respectivement mise à l'échelle horizontale, inclinaison horizontale, inclinaison verticale, mise à l'échelle verticale, déplacement horizontal et déplacement vertical. Cette propriété sera superposée et sera effective pour le prochain graphique.

　ctx.setTransform(a,b,c,d,e,f); Comme ci-dessus, cet attribut redéfinira une transformation et sera valide pour le graphique suivant.

drawImage():

ctx.drawImage(dom,arg1,arg2,arg3,arg4,arg5,arg6,arg7,arg8); au maximum 8 paramètres peuvent être transmis, 2 pour le positionnement de l'image (taille d'origine), 4 pour le positionnement de l'image en fonction de la taille et 8 pour le positionnement de l'image après découpe (respectivement : début de découpe x, y, taille de découpe w , h, position de positionnement x, y, taille w, h).

Attribut GlobalAipha : définit la transparence globale. (Ceux déjà peints ne seront pas affectés).

L'attribut globalCompositeOperation définit l'ordre d'empilement des zones superposées précédentes et suivantes, y compris "source-over" et "destination-over", laquelle est au-dessus et laquelle est en dessous.

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!