HTML5-9 __Canvas Shadow API-H5-Tutorial-php.cn

HTML5-9 __Canvas Shadow API

黄舟

Freigeben： 2017-02-18 14:43:07

Original

1729 Leute haben es durchsucht

In diesem Artikel wird die Canvas Shadow-API vorgestellt, die dem Text einen unscharfen Schatteneffekt hinzufügt. Obwohl die Canvas-Schatteneffekt-Anwendung bereits vorgestellt wurde, stellen wir hier hauptsächlich den Schatteneffekt auf Text vor.

Schatteneffekt Sie müssen auch den „Grad“ verstehen, wenn Sie ihn verwenden

Schauen Sie sich ein Beispiel an

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>文本阴影示例</title>
<canvas id="trails" style="border: 1px solid;"  width="400" height="300"> </canvas>
<script>
    drawTrails();
    function drawTrails() {
        var canvas = document.getElementById(&#39;trails&#39;);
        var context = canvas.getContext(&#39;2d&#39;);
        context.save();
        context.font = "60px impact";
        context.fillStyle = &#39;#996600&#39;
        context.textAlign = &#39;center&#39;;

        // 设置文字阴影的颜色为黑色，透明度为20%
        context.shadowColor = &#39;rgba(0, 0, 0, 0.2)&#39;;

        // 将阴影向右移动15px, 向上移动10px
        context.shadowOffsetX = 15;
        context.shadowOffsetY = -10;

        // 轻微模糊阴影
        context.shadowBlur = 2;
        context.fillText(&#39;Happy Trails!&#39;, 200, 60, 400);
        context.restore();
    }
</script>
</html>

Nach dem Login kopieren

Run Rendering

Das Obige ist ein Schatten, der durch den CSS-Stil generiert wird. Er ändert sich nur in seiner Position und kann nicht mit der vorherigen Einführung verglichen werden. Die -Transformation erzeugt Schatten (Baumschatten) , um synchron zu bleiben. Aus Gründen der Konsistenz sollten Sie beim Zeichnen von Schatten auf Leinwand versuchen, nur eine Methode zu verwenden.

Das Obige ist der Inhalt der Schatten-API von HTML5 9 __Canvas. Für weitere verwandte Inhalte zahlen Sie bitte Achtung auf die chinesische PHP-Website (m.sbmmt.com)!