Heim > Web-Frontend > H5-Tutorial > Hauptteil

So zeichnen Sie Schatteneffekte mit HTML5 Canvas

不言
Freigeben: 2018-07-02 11:30:15
Original
2444 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Methode zur Verwendung von HTML5 Canvas zum Zeichnen von Schatteneffekten vorgestellt, einschließlich eines Beispiels für das Schreiben von Text mit 3D-Schatten- und Kantenunschärfeeffekten, und es wird weiter auf die Verwendung von Schatteneffekten eingegangen.

Um einen Schatteneffekt zu erzeugen, müssen Sie die folgenden 4 Eigenschaften bedienen:

1.context.shadowColor: Schattenfarbe.
2.context.shadowOffsetX: Schatten-X-Achsen-Verschiebung. Positive Werte gehen nach rechts, negative Werte gehen nach links.
3.context.shadowOffsetY: Verschiebung der Y-Achse des Schattens. Positive Werte sinken, negative Werte steigen.
4.context.shadowBlur: Schattenunschärfefilter. Je größer die Daten, desto größer die Streuung.
Solange das erste und eines der verbleibenden drei Attribute festgelegt ist, wird der Schatteneffekt erzielt. Normalerweise müssen jedoch alle vier Eigenschaften festgelegt werden.

Um beispielsweise einen roten Schatten zu erstellen, der um 5 Pixel nach rechts unten verschoben und um 2 Pixel unscharf ist, können Sie ihn so schreiben.

context.shadowColor = "red";   
context.shadowOffsetX = 5;   
context.shadowOffsetY = 5;   
context.shadowBlur= 2;
Nach dem Login kopieren

Es ist zu beachten, dass es sich beim Schatten hier, wie auch bei anderen Attributeinstellungen, um zustandsbasierte Einstellungen handelt. Wenn Sie also nur einen Schatten anstelle eines globalen Schattens auf ein bestimmtes Objekt anwenden möchten, müssen Sie diese vier Eigenschaften des Schattens vor der nächsten Zeichnung zurücksetzen.
Laufergebnis:
2016325110954383.jpg (850×500)

Schattentext:

Solange die Werte von ShadowOffsetX und ShadowOffsetY sind Wenn die Werte beide positive Zahlen sind, wird der Schatten von der unteren rechten

Seite des Textes versetzt. Wenn alle Werte negativ sind, wird der Schatten relativ zur oberen linken Ecke des Textes versetzt.

3D-Schatteneffekt:

Wiederholt Text an derselben Position zeichnen und dabei die Werte vonshadowOffsetX,shadowOffsetY,shadowBlur

von klein auf ändern groß Mit zunehmendem Offset nimmt auch die Transparenz zu. Sie erhalten den Schatteneffekttext.

Text mit Kantenunschärfeeffekt:

Wiederholen Sie den Vorgang basierend auf dem 3D-Schatteneffekt in vier Richtungen, um den Kantenverlaufseffekt für Text zu erhalten.

Betriebseffekt:
2016325111023538.jpg (472×470)

Programmcode:

<!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

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein . Mehr verwandte Bitte beachten Sie den Inhalt der chinesischen PHP-Website!

Verwandte Empfehlungen:

HTML5-Touch-Event, um das Auf- und Abwärtsschieben der Touchscreen-Seite zu realisieren

Bilder einfügen und wie zum Speichern als Bild

So zeichnen Sie Bilder mit HTML5 und JS auf Leinwand

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie Schatteneffekte mit HTML5 Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage