suchen

Heim >Web-Frontend >H5-Tutorial >Wie setze ich Schatten auf die Leinwand? So setzen Sie Schatten auf die Leinwand

Wie setze ich Schatten auf die Leinwand? So setzen Sie Schatten auf die Leinwand

不言
不言Original
2018-09-17 13:43:295351Durchsuche

Wir wissen, dass wir CSS verwenden können, um Schatteneffekte zu erzielen, aber Canvas in HTML5 kann auch zum Festlegen von Schatteneffekten verwendet werden. Daher wird Ihnen im folgenden Artikel erläutert, wie Sie mit Canvas Schatteneffekte festlegen Schauen Sie sich den Inhalt direkt an.

Zuallererst müssen Sie wissen, dass Sie beim Zeichnen auf Leinwand, sei es Text, Grafiken oder Bilder, egal ob Strich oder Füllung, Schatten dafür festlegen können, indem Sie die entsprechenden Eigenschaften festlegen Kontextobjekt.

Canvas erzeugt einen Schatteneffekt mithilfe der folgenden vier Eigenschaften:

shadowColor: Die Farbe des Schattens, sein Standardwert ist vollständig transparentes Schwarz. Wenn diese Eigenschaft nicht auf opak gesetzt ist, ist der Schatten daher unsichtbar. Diese Eigenschaft kann nur auf eine Zeichenfolge festgelegt werden, die eine Farbe darstellt. Farbverläufe oder Muster können nicht verwendet werden. Durch die Verwendung von durchscheinenden Schatten können sehr realistische Schatteneffekte erzeugt werden, da der Hintergrund durch den Schatten sichtbar ist.

shadowOffsetX: Der Versatz des Schattens auf der X-Achse in Pixel. Der Standardwert ist 0, wodurch der Schatten direkt unter der Form platziert wird und unsichtbar ist. Größer als 0 Offsets nach rechts, weniger als 0 Offsets nach links. Je größer der Schattenversatz ist, desto größer ist der erzeugte Schatten und desto höher erscheinen die gezeichneten Grafiken auf der Leinwand.

shadowOffsetY: Der Versatz des Schattens auf der Y-Achse in Pixel. Der Standardwert ist 0, wodurch der Schatten direkt unter der Form platziert wird und unsichtbar ist. Ist er größer als 0, verschiebt er sich nach unten, ist er kleiner als 0, verschiebt er sich nach oben. Je größer der Schattenversatz ist, desto größer ist der erzeugte Schatten und desto höher erscheinen die gezeichneten Grafiken auf der Leinwand.

shadowBlur: Der Unschärfewert des Schattens. ist ein pixelunabhängiger Wert, der in der Gaußschen Unschärfegleichung zum Unschärfen von Schatten verwendet wird. Der Standardwert ist 0, was einen klaren Schatten erzeugt. Je größer der Wert, desto unschärfer ist der Schatten.

Hinweis: Gemäß der Canvas-Spezifikation zeichnet der Browser nur dann einen Schatten, wenn die folgenden zwei Bedingungen erfüllt sind:

1 Eine nicht vollständig transparente Schattenfarbe ist angegebene Attributwerte;

2, ShadowOffsetX, ShadowOffsetY, ShadowBlur, mindestens eines der drei Attribute hat einen anderen Wert als 0.

Sehen wir uns den Beispielcode des von Canvas implementierten Schatteneffekts an: 

<!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 legt den Schatteneffekt wie folgt fest:

Wie setze ich Schatten auf die Leinwand? So setzen Sie Schatten auf die Leinwand

Dieser Artikel endet hier. Weitere Informationen zur Verwendung des Canvas-Elements finden Sie im HTML5-Entwicklungshandbuch.

Das obige ist der detaillierte Inhalt vonWie setze ich Schatten auf die Leinwand? So setzen Sie Schatten auf die Leinwand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
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
Vorheriger Artikel：Welche neuen Tags und Attribute werden zu HTML5 hinzugefügt? Neue Tags und Attribute hinzugefügt (Zusammenfassung)Nächster Artikel：Welche neuen Tags und Attribute werden zu HTML5 hinzugefügt? Neue Tags und Attribute hinzugefügt (Zusammenfassung)

In Verbindung stehende Artikel

Mehr sehen