Comment créer un modèle que remplissage ou du trait avec la balise HTML5 Canvas

Divers Neontrees0219 Février 29, 2016 0 0
FONT SIZE:
fontsize_dec
fontsize_inc

 Presque toutes les activités en fonction de la toile HTML5 met en œuvre un style de remplissage ou d'un AVC. Pour tirer le meilleur parti de la toile, vous devez comprendre comment ils fonctionnent. Les trois principaux types de styles que vous pouvez utiliser dans Remplit et trace ses couleurs, les dégradés et les motifs.

 Un motif est utilisé pour définir une image comme fond ou de contour. Vous pouvez utiliser une image comme un modèle, mais il est généralement préférable d'inventer ou de créer une image destinée à être carrelée.

 Il existe de nombreuses sources de modèles de tuiles disponibles sur le web. Une fois que vous utilisez une image que vous souhaitez utiliser comme motif de remplissage, voici comment le mettre en œuvre dans la balise canvas:

 {function tirage
 var = dessin;
 var = con;
 var = texture;

 pFill =;
 = PFill;
 ;
 = "Sans-serif 40px";
 ;
 = PFill;
 = 5;
 ;
 } // Tirage Fin

 Les résultats de ce code sont présentés ici:


 Un motif est tout simplement une image. La construction d'un modèle est relativement simple:

  •  Accédez à une image.

     Vous aurez besoin d'un objet image JavaScript afin de servir de base pour votre modèle. Il ya un certain nombre de façons de le faire, mais le plus simple est de l'image quelque part dans votre code HTML, cachent avec le display: none style et utilisent la norme

  •  Créer une variable pour le motif.

     Tels que des rampes, un motif de remplissage peuvent être réutilisés, donc gardez le motif dans une variable pour une utilisation ultérieure.

  •  Utilisez la méthode créer modèle pour créer un modèle d'une image.
  •  Spécifiez le paramètre répétition du motif.

     Le deuxième paramètre indique la façon dont le motif est répété. La valeur par défaut est "répéter" dans lequel le motif se répète dans les deux axes x et y indéfiniment. Si votre modèle est pas ouvert, vous obtenez une couture visible où les répétitions de motifs voir. Vous pouvez également répéter la valeur de répéter-x repeat-y, et no-repeat.

  •  Prenez-le au style de style de remplissage ou de course variable.

     Attribuer le modèle variable pour le style de remplissage du contexte et puis exécutez pour régler chaque opération de remplissage dans le motif.

(0)
(0)