Comment dessiner une étoile à cinq branches sur une toile HTML5

Cet article présente principalement la méthode de dessin d'une étoile à cinq branches sur un canevas HTML5. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

5ba626b379994d53f7acf72a64f9b697

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. Sa particularité est que cette balise peut obtenir un. Objet CanvasRenderingContext2D. Nous pouvons contrôler cet objet pour le dessin 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.

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.

Le code correspondant est le suivant :

Effet final :

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

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

html5 utilise le canevas pour obtenir l'effet de flamme qui suit le curseur

Utiliser le canevas pour dessiner " Dora A" Code de l'horloge "Rêve"

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!