搜尋

首頁 >web前端 >H5教程 >HTML5之9 __Canvas 的Shadow API

HTML5之9 __Canvas 的Shadow API

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

本文介紹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 文本

相關文章

看更多