Lignes de dessin de base du canevas HTML5

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b est une nouvelle balise en HTML5, utilisée pour dessiner des graphiques. Cet article présente principalement en détail la méthode de dessin de lignes dans le dessin de base du canevas HTML5. Pour référence,

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 dans la mesure où elle est spéciale. peut obtenir un objet CanvasRenderingContext2D et nous pouvons contrôler l'objet pour le dessiner via des scripts 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 en fin de ligne. Elle peut prendre les valeurs suivantes : "butt" ajoute une bordure droite à chaque extrémité de la ligne (par défaut). ; "round" ajoute un capuchon rond à chaque extrémité de la ligne;
"square" ajoute un capuchon carré à chaque extrémité de la ligne. La propriété

•lineJoin définit ou renvoie le type de coin créé lorsque deux lignes se rencontrent. Elle peut prendre les valeurs suivantes : "miter" Crée des angles vifs. (par défaut) ; « biseau » crée des coins biseautés ;
« rond » crée des coins arrondis. La propriété

•miterLimit définit ou renvoie la longueur d'onglet maximale (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".

Code JavaScript

Copiez le contenu dans le presse-papier

Les effets de valeurs différentes pour chacun sont les suivants :

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();

Recommandations associées :

Utilisez HTML5 Canvas pour remplir les images avec de la couleur et de la texture

Le canevas Javascript HTML5 implémente une carte des provinces déplaçables de la Chine

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!