首頁 > 文章 > web前端 > HTML5之9 __Canvas 的Shadow API

HTML5之9 __Canvas 的Shadow API

黄舟原創: 2017-02-18 14:43:071707瀏覽

本文介紹Canvas Shadow API ，為文本添加模糊陰影效果. 雖然之前已對 canvas 陰影效果應用有介紹, 這裡主要介紹對文本的陰影效果.

陰影效果的使用也要把握好"度".

看一個例子

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

運行效果圖

，而只有

，只有在它之前的陰影變換產生的陰影(樹影)

保持同步. 為了一致起見，在canvas 上繪製陰影時，應該盡量只用一種方法

以上就是HTML5之9 __Canvas 的Shadow API 的內容，更多相關內容請關注PHP中文網（www.php.cn）！

🎜🎜🎜

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：HTML5之8 __Canvas 文本下一篇：HTML5之8 __Canvas 文本

看更多

HTML5之9 __Canvas 的Shadow API

相關文章