Maison > interface Web > Tutoriel H5 > le corps du texte

Comment dessiner des effets d'ombre à l'aide de HTML5 Canvas

不言
Libérer: 2018-07-02 11:30:15
original
2438 Les gens l'ont consulté

Cet article présente principalement la méthode d'utilisation de HTML5 Canvas pour dessiner des effets d'ombre, y compris un exemple d'écriture de texte d'effet d'ombre 3D + flou de bord, et une utilisation plus approfondie des effets d'ombre. Les amis qui en ont besoin peuvent s'y référer<.>

Pour créer un effet d'ombre, vous devez actionner les 4 propriétés suivantes :

1.context.shadowColor : couleur de l'ombre.

2.context.shadowOffsetX : déplacement de l'ombre sur l'axe x. Les valeurs positives vont à droite, les valeurs négatives vont à gauche.
3.context.shadowOffsetY : déplacement de l'ombre sur l'axe y. Les valeurs positives diminuent, les valeurs négatives augmentent.
4.context.shadowBlur : Filtre de flou d'ombre. Plus les données sont volumineuses, plus la propagation est grande.
Tant que le premier et l'un des trois attributs restants sont définis, l'effet d'ombre sera obtenu. Cependant, généralement, les quatre propriétés doivent être définies.

Par exemple, pour créer une ombre rouge décalée de 5px vers le bas à droite et floue de 2px, vous pouvez l'écrire comme ceci.

context.shadowColor = "red";   
context.shadowOffsetX = 5;   
context.shadowOffsetY = 5;   
context.shadowBlur= 2;
Copier après la connexion
Il convient de noter que l'ombre ici, comme d'autres paramètres d'attribut, sont des paramètres basés sur l'état. Par conséquent, si vous souhaitez appliquer une ombre uniquement à un certain objet au lieu d'une ombre globale, vous devez réinitialiser ces quatre propriétés de l'ombre avant le dessin suivant.

Résultat d'exécution :

2016325110954383.jpg (850×500)

Texte de l'ombre :

Tant que les valeurs​​de shadowOffsetX et shadowOffsetY sont défini, lorsque les valeurs​​sont toutes deux des nombres positifs, l'ombre est décalée par rapport au côté inférieur droit

du texte. Lorsque les valeurs sont toutes négatives, l'ombre est décalée par rapport au coin supérieur gauche du texte.

Effet d'ombre 3D :

Dessinez à plusieurs reprises du texte à la même position tout en modifiant les valeurs de shadowOffsetX, shadowOffsetY, shadowBlur

de petit à grand À mesure que le décalage continue d'augmenter, la transparence augmente également. Vous obtenez le texte de l'effet d'ombre.

Texte avec effet de flou de bord :

Répétez dans quatre directions en fonction de l'effet d'ombre 3D pour obtenir l'effet de texte d'accentuation des bords.

Effet opérationnel :


2016325111023538.jpg (472×470)

Code du programme :

<!DOCTYPE html>     
<html>     
<head>     
<meta http-equiv="X-UA-Compatible" content="chrome=IE8">     
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">     
<title>Canvas Clip Demo</title>     
<link href="default.css" rel="stylesheet" />     
    <script>     
        var ctx = null; // global variable 2d context   
        var imageTexture = null;     
        window.onload = function() {     
            var canvas = document.getElementById("text_canvas");     
            console.log(canvas.parentNode.clientWidth);     
            canvas.width = canvas.parentNode.clientWidth;     
            canvas.height = canvas.parentNode.clientHeight;     
            if (!canvas.getContext) {     
                console.log("Canvas not supported. Please install a HTML5 compatible browser.");     
                return;     
            }     
            var context = canvas.getContext(&#39;2d&#39;);     
            // section one - shadow and blur   
            context.fillStyle="black";     
            context.fillRect(0, 0, canvas.width, canvas.height/4);     
            context.font = &#39;60pt Calibri&#39;;     
            context.shadowColor = "white";     
            context.shadowOffsetX = 0;     
            context.shadowOffsetY = 0;     
            context.shadowBlur = 20;     
            context.fillText("Blur Canvas", 40, 80);     
            context.strokeStyle = "RGBA(0, 255, 0, 1)";     
            context.lineWidth = 2;     
            context.strokeText("Blur Canvas", 40, 80);     
            // section two - shadow font   
            var hh = canvas.height/4;     
            context.fillStyle="white";     
            context.fillRect(0, hh, canvas.width, canvas.height/4);     
            context.font = &#39;60pt Calibri&#39;;     
            context.shadowColor = "RGBA(127,127,127,1)";     
            context.shadowOffsetX = 3;     
            context.shadowOffsetY = 3;     
            context.shadowBlur = 0;     
            context.fillStyle = "RGBA(0, 0, 0, 0.8)";     
            context.fillText("Blur Canvas", 40, 80+hh);     
            // section three - down shadow effect   
            var hh = canvas.height/4 + hh;     
            context.fillStyle="black";     
            context.fillRect(0, hh, canvas.width, canvas.height/4);     
            for(var i = 0; i < 10; i++)     
            {     
                context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";     
                context.shadowOffsetX = i*2;     
                context.shadowOffsetY = i*2;     
                context.shadowBlur = i*2;     
                context.fillStyle = "RGBA(127, 127, 127, 1)";     
                context.fillText("Blur Canvas", 40, 80+hh);     
            }     
            // section four -  fade effect   
            var hh = canvas.height/4 + hh;     
            context.fillStyle="green";     
            context.fillRect(0, hh, canvas.width, canvas.height/4);     
            for(var i = 0; i < 10; i++)     
            {     
                context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";     
                context.shadowOffsetX = 0;     
                context.shadowOffsetY = -i*2;     
                context.shadowBlur = i*2;     
                context.fillStyle = "RGBA(127, 127, 127, 1)";     
                context.fillText("Blur Canvas", 40, 80+hh);     
            }     
            for(var i = 0; i < 10; i++)     
            {     
                context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";     
                context.shadowOffsetX = 0;     
                context.shadowOffsetY = i*2;     
                context.shadowBlur = i*2;     
                context.fillStyle = "RGBA(127, 127, 127, 1)";     
                context.fillText("Blur Canvas", 40, 80+hh);     
            }     
            for(var i = 0; i < 10; i++)     
            {     
                context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";     
                context.shadowOffsetX = i*2;     
                context.shadowOffsetY = 0;     
                context.shadowBlur = i*2;     
                context.fillStyle = "RGBA(127, 127, 127, 1)";     
                context.fillText("Blur Canvas", 40, 80+hh);     
            }     
            for(var i = 0; i < 10; i++)     
            {     
                context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";     
                context.shadowOffsetX = -i*2;     
                context.shadowOffsetY = 0;     
                context.shadowBlur = i*2;     
                context.fillStyle = "RGBA(127, 127, 127, 1)";     
                context.fillText("Blur Canvas", 40, 80+hh);     
            }     
        }     
    </script>     
</head>     
<body>     
    <h1>HTML5 Canvas Clip Demo - By Gloomy Fish</h1>     
    <pre class="brush:php;toolbar:false">Fill And Stroke Clip

Copier après la connexion
Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il vous sera utile. l'étude de tout le monde. Plus Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Événement tactile HTML5 pour réaliser un glissement de haut en bas de la page de l'écran tactile

Mettre des images et comment à enregistrer en tant qu'image

Comment dessiner des images sur toile en utilisant html5 et js

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal