recherche

Maison >interface Web >Tutoriel H5 >Comment définir une ombre sur la toile ? Comment définir une ombre sur la toile

Comment définir une ombre sur la toile ? Comment définir une ombre sur la toile

不言
不言original
2018-09-17 13:43:295353parcourir

Nous savons que nous pouvons utiliser CSS pour obtenir des effets d'ombre, mais le canevas en HTML5 peut également être utilisé pour définir des effets d'ombre. Par conséquent, l'article suivant vous présentera comment utiliser le canevas pour définir des effets d'ombre. Dites, regardez directement le contenu.

Tout d'abord, vous devez savoir que lorsque vous dessinez sur un canevas, qu'il s'agisse de texte, de graphiques ou d'images, qu'il s'agisse d'un trait ou d'un remplissage, vous pouvez définir des ombres pour eux en définissant les propriétés pertinentes du objet contextuel.

Canvas crée un effet d'ombre en utilisant les quatre propriétés suivantes :

shadowColor : La couleur de l'ombre, sa valeur par défaut est un noir complètement transparent. Par conséquent, si cette propriété n’est pas définie sur opaque, l’ombre est invisible. Cette propriété ne peut être définie que sur une chaîne représentant une couleur ; les dégradés ou les motifs ne peuvent pas être utilisés. L’utilisation d’ombres translucides peut produire des effets d’ombre très réalistes car l’arrière-plan peut être vu à travers l’ombre.

shadowOffsetX : Le décalage de l'ombre sur l'axe X, en pixels. La valeur par défaut est 0, ce qui place l'ombre directement sous la forme et la rend invisible. Plus de 0 se déplace vers la droite, moins de 0 se déplace vers la gauche. Plus le décalage de l'ombre est grand, plus l'ombre produite est grande et plus les graphiques dessinés apparaîtront haut sur la toile.

shadowOffsetY : Le décalage de l'ombre sur l'axe Y, en pixels. La valeur par défaut est 0, ce qui place l'ombre directement sous la forme et la rend invisible. S'il est supérieur à 0, il se déplacera vers le bas. S'il est inférieur à 0, il se déplacera vers le haut. Plus le décalage de l'ombre est grand, plus l'ombre produite est grande et plus les graphiques dessinés apparaîtront haut sur la toile.

shadowBlur : La valeur de flou de l'ombre. est une valeur indépendante du pixel utilisée dans l'équation du flou gaussien pour flouter les ombres. La valeur par défaut est 0, ce qui produit une ombre claire. Plus la valeur est grande, plus l'ombre est floue.

Remarque : selon la spécification du canevas, le navigateur dessinera une ombre uniquement lorsque les deux conditions suivantes sont remplies :

1. Une shadowColor non entièrement transparente est. Valeurs d'attribut spécifiées ;

2, shadowOffsetX, shadowOffsetY, shadowBlur, au moins un des trois attributs a une valeur autre que 0.

Jetons un coup d'œil à l'exemple de code d'effet d'ombre implémenté par Canvas : 

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>Canvas</title>
 </head>
 <style type="text/css">
    body{margin:20px auto; padding:0; width:800px; }
    canvas{border:dashed 2px #CCC}
 </style>
 <script type="text/javascript">
    function $$(id){
        return document.getElementById(id);
    }
    function pageLoad(){
        var can = $$(&#39;can&#39;);
        var cans = can.getContext(&#39;2d&#39;);
        cans.fillStyle = &#39;green&#39;;
        cans.shadowOffsetX = 5;
        cans.shadowOffsetY = 5;
        cans.shadowColor = &#39;#333&#39;;
        cans.shadowBlur = 10;
        cans.fillRect(200,300,400,200);
    }
 </script>
<body onload="pageLoad();">
    <canvas id="can" width="800px" height="600px"></canvas>
</body>
</html>

Canvas définit l'effet d'ombre comme suit :

Comment définir une ombre sur la toile ? Comment définir une ombre sur la toile

Cet article se termine ici. Pour plus d'informations sur l'utilisation de l'élément canvas, veuillez vous référer au manuel de développement html5.

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Quels nouveaux balises et attributs sont ajoutés au HTML5 ? Nouvelles balises et attributs ajoutés (résumé)Article suivant：Quels nouveaux balises et attributs sont ajoutés au HTML5 ? Nouvelles balises et attributs ajoutés (résumé)

Articles Liés

Voir plus