Home > Article > Web Front-end > HTML5-9 __Canvas Shadow API

HTML5-9 __Canvas Shadow API

黄舟Original: 2017-02-18 14:43:071637browse

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>

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5-8 __Canvas textNext article：HTML5-8 __Canvas text

See more

HTML5-9 __Canvas Shadow API

Related articles