Effet d'ombre de dessin de base de toile HTML5

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 d'ombres pour le dessin de base du canevas HTML5. Pour référence,

.

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. obtenez un objet CanvasRenderingContext2D et nous pouvons contrôler l'objet à dessiner via des scripts 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.

Dessin d'ombre :

• shadowColor Définit ou renvoie la couleur utilisée pour les ombres.

• shadowBlur Définit ou renvoie le niveau de flou utilisé pour les ombres (des valeurs plus grandes sont plus floues).

• shadowOffsetX Définit ou renvoie la distance horizontale entre l'ombre et la forme.

• shadowOffsetY Définit ou renvoie la distance verticale entre l'ombre et la forme.

Ajoutons une

ombre à l'étoile à cinq branches précédemment dessinée

Code JavaScript Copier le contenu dans le presse-papiers

1. var canvas = document.getElementById("canvas"); 🎜 >

2. var

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

context.beginPath ( ; > (
3. var

   i = 0; i < 5; i++) {

4. context.lineTo(Math.cos((18+i*72) /180 *Math.PI)*200+200,                                                                                                                          

   context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,

5. -Math .sin((54+i*72)/180*Math.PI)*80+200);

   }

6. context. closePath();
//Définissez le style de bordure et la couleur de remplissage
9. context.lineWidth=

   " 3"

   ;

10. context.fillStyle =
"#F6F152"
12. context.StrokeStyle =

    "#F5270B"; .shadowOffsetX = 30;

13. context.shadowOffsetY = 30; 🎜>

    context.shadowBlur = 2; context.fill();

14. context.stroke(); L'effet est le suivant :

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!