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

HTML5-9 __Canvas Shadow API

黄舟

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

Original

1731 people have browsed it

This article introduces the Canvas Shadow API, which adds a blurred shadow effect to text. Although canvas shadow effect application has been introduced before, here we mainly introduce the shadow effect on text.

Shadow effect You must also grasp the "degree" when using it.

Look at an example

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

Copy after login

Operation renderings

The above is a shadow generated by CSS style. It only changes the position and cannot be compared with the previously introduced The shadow (tree shadow) generated by the transformation remains synchronized. For the sake of consistency, when drawing shadows on canvas, you should try to use only one method

The above is the content of the Shadow API of HTML5 9 __Canvas. For more related content, please pay attention to the PHP Chinese website (www .php.cn)!