HTML5 Canvas Schatten

HTML5 Canvas Shadows können in HTML5Formen, die auf dem Canvas gezeichnet werden, erhalten automatisch einen Schatten, shadowOffsetX und shadowOffsetY setzen den Abstand zwischen der Schattenposition und der Form.

Online-Beispiel

Kann in HTML5Formen, die auf dem Canvas gezeichnet werden, erhalten automatisch einen Schatten. Hier sind einige Beispiele:

Schatten werden durch folgende vier2D Context-Eigenschaft steuert:

1. shadowOffsetX

2. shadowOffsetY

3. shadowBlur

4. shadowColor

shadowOffsetX und shadowOffsetY setzen den Abstand zwischen der Schattenposition und der Form. Positive Werte bedeuten, dass der Schatten auf der rechten Seite (x) und unteren Seite (y) der Form gezeichnet wird. Negative Werte bedeuten, dass der Schatten auf der linken Seite (x) und oberen Seite (y) der Form gezeichnet wird.
shadowBlur setzt die Ausbreitung des Schattens. Der Wert ist umso höher, je verschwommener die Form ist. Ein niedriger Wert macht den Schatten scharfer. Ein Wert von 0 bedeutet, dass der Schatten gar nicht verschwommen ist.
shadowColor legt nur die Farbe des Schattens fest.
Dies ist der Code des obigen Beispiels:

<canvas id="ex1" width="500" height="200" style="border:　1px festen #cccccc;">
　　　　HTML5　Canvas nicht unterstützt
</canvas>
<script>
var canvas = document.getElementById("ex1);
var context = canvas.getContext("2d");
context.shadowOffsetX =　10;
context.shadowOffsetY =　10;
context.shadowBlur =　4;
context.shadowColor = "#666666";//oder verwenden Sie rgb( Rot, Grün, Blau)
context.fillStyle = "#000000";
context.fillRect(10,10,　50,　50);
context.fillStyle = "#000066";
context.font = "30px Arial";
context.fillText("HTML5　Canvas Shadow",　10,120);
</script>