Lignes de dessin de base du canevas HTML5

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b 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.

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b 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 5ba626b379994d53f7acf72a64f9b697> :

1. Récupérez l'objet DOM correspondant à l'élément 5ba626b379994d53f7acf72a64f9b697 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();

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





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) !