Comment dessiner une étoile à cinq branches en H5

Cette fois, je vais vous montrer comment dessiner une étoile à cinq branches en utilisant H5. Comment dessiner une étoile à cinq branches en utilisant H5 ? Quelles sont les précautions pour dessiner une étoile à cinq branches en H5 Ce qui suit est un cas pratique, regardons-y.

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. La particularité est que cette balise peut obtenir un CanvasRenderingContext2D. Objet, nous pouvons contrôler l'objet à dessiner via le script JavaScript.

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b est simplement un conteneur pour dessiner des graphiques. En plus des attributs tels que l'identifiant, la classe et le style, il possède également des attributs de hauteur et de largeur. 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
2. Appelez la méthode getContext() de l'objet Canvas pour obtenir un objet CanvasRenderingContext2D
3. Appelez l'objet CanvasRenderingContext2D pour le dessin.

En analysant l'étoile à cinq branches, nous pouvons déterminer les règles des coordonnées de chaque sommet. Une chose à noter ici est : dans le canevas, la direction de l'axe Y est vers le bas.

var canvas = document.getElementById("canvas");   
    var context = canvas.getContext("2d");   
    context.beginPath();   
    //设置是个顶点的坐标，根据顶点制定路径   
    for (var i = 0; i < 5; i++) {   
        context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200,   
                        -Math.sin((18+i*72)/180*Math.PI)*200+200);   
        context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,   
                        -Math.sin((54+i*72)/180*Math.PI)*80+200);   
    }   
    context.closePath();   
    //设置边框样式以及填充颜色   
    context.lineWidth="3";   
    context.fillStyle = "#F6F152";   
    context.strokeStyle = "#F5270B";   
    context.fill();   
    context.stroke();

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser des expressions régulièrespour faire correspondre les adresses IP et les noms de domaine

Quels types d'expressions régulières peut Afficher le surlignage

Comment télécharger un avatar dans l'applet WeChat

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!