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

API HTML5-9 __Canvas Shadow

黄舟

Libérer： 2017-02-18 14:43:07

original

1730 Les gens l'ont consulté

Cet article présente l'API Canvas Shadow, qui ajoute un effet d'ombre floue au texte. Bien que l'application d'effet d'ombre sur toile ait déjà été introduite, nous introduisons ici principalement l'effet d'ombre sur le texte.

Effet d'ombre Vous devez également saisir le "degré" lorsque vous l'utilisez

Regardez un exemple

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

Copier après la connexion

Exécuter le rendu

Ce qui précède est une ombre générée par le style CSS. Elle ne change que de position. et ne peut être comparé à l'introduction précédente. La transformation génère des ombres (ombres d'arbres) pour rester synchronisées. Par souci de cohérence, lorsque vous dessinez des ombres sur le canevas, vous devez essayer d'utiliser une seule méthode

Ce qui précède est le contenu de l'API Shadow de HTML5 9 __Canvas Pour plus de contenu connexe, veuillez payer. attention au site PHP chinois (www .php.cn) !