Comment définir une ombre sur la toile ? Comment définir une ombre sur la toile-Tutoriel H5-php.cn

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

不言

Libérer： 2018-09-17 13:43:29

original

5287 Les gens l'ont consulté

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>

Copier après la connexion

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