Maison > interface Web > Tutoriel H5 > le corps du texte

Lignes de dessin de base du canevas HTML5

黄舟
Libérer: 2017-02-23 14:04:08
original
2361 Les gens l'ont consulté

est une nouvelle balise en HTML5, utilisée pour dessiner des graphiques. En fait, cette balise est la même que les autres balises. Obtenez un objet CanvasRenderingContext2D, nous pouvons contrôler l'objet à dessiner via un script JavaScript.

est simplement un conteneur pour dessiner des graphiques. En plus des attributs tels que l'identifiant, la classe, le style, etc., il a également une hauteur et une largeur. attributs. Il y a trois étapes principales pour dessiner sur l'élément > :

1. Récupérez l'objet DOM correspondant à l'élément la méthode getContext (de l'objet Canvas) pour obtenir un objet CanvasRenderingContext2D
3. Appelez l'objet CanvasRenderingContext2D pour le dessin.


Attributs de ligne
En plus de l'attribut lineWidth utilisé ci-dessus, les lignes ont également les attributs suivants :


•lineCap La propriété définit ou renvoie le style de la fin de la ligne à la fin de la ligne. Elle peut prendre les valeurs suivantes : "butt" ajoute une bordure droite à chaque extrémité de la ligne (par défaut
"round) ; " ajoute une bordure droite à chaque extrémité de la ligne. Ajoute des capuchons ronds aux extrémités ;
"carré" ajoute des capuchons carrés à chaque extrémité de la ligne. La propriété


•lineJoin définit ou renvoie le type de coin créé lorsque deux lignes se croisent. Elle peut prendre les valeurs suivantes : "miter" crée un coin pointu (par défaut) « biseau » crée un biseau ;
« rond » crée un coin arrondi. 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". Le code JavaScript copie le contenu dans le presse-papiers



var canvas = document.getElementById("canvas");   

        var context = canvas.getContext("2d");   

        //测试lineCap属性   

        //设置基准线便于观察   

        context.moveTo(10,10);   

        context.lineTo(10,200);   

        context.moveTo(200,10);   

        context.lineTo(200,200);   

        context.lineWidth="1";   

        context.stroke();   

        //butt   

        context.beginPath();   

        context.moveTo(10,50);   

        context.lineTo(200,50);   

        context.lineCap="butt";   

        context.lineWidth="10";   

        context.stroke();   

        //round   

        context.beginPath();   

        context.moveTo(10,100);   

        context.lineTo(200,100);   

        context.lineCap="round";   

        context.lineWidth="10";   

        context.stroke();   

        //square   

        context.beginPath();   

        context.moveTo(10,150);   

        context.lineTo(200,150);   

        context.lineCap="square";   

        context.lineWidth="10";   

        context.stroke();   

      

        //测试linJoin属性   

        //miter   

        context.beginPath();   

        context.moveTo(300,50);   

        context.lineTo(450,100);   

        context.lineTo(300,150);   

        context.lineJoin="miter";   

        context.lineWidth="10";   

        context.stroke();   

        //round   

        context.beginPath();   

        context.moveTo(400,50);   

        context.lineTo(550,100);   

        context.lineTo(400,150);   

        context.lineJoin="round";   

        context.lineWidth="10";   

        context.stroke();   

        //square   

        context.beginPath();   

        context.moveTo(500,50);   

        context.lineTo(650,100);   

        context.lineTo(500,150);   

        context.lineJoin="bevel";   

        context.lineWidth="10";   

        context.stroke();   

      

        //测试miterLimit属性   

        context.beginPath();   

        context.moveTo(700,50);   

        context.lineTo(850,100);   

        context.lineTo(700,150);   

        context.lineJoin="miter";   

        context.miterLimit="2";   

        context.lineWidth="10";   

        context.strokeStyle="#2913EC";   

        context.stroke();
Copier après la connexion

Les effets des différentes valeurs pour chaque attribut sont les suivants :



Lignes de dessin de base du canevas HTML5

Ce qui précède est le contenu des lignes de dessin dans le dessin de base du canevas HTML5. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php. .cn) !

Lignes de dessin de base du canevas HTML5
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!