HTML5 Canvas 物件的文字描繪陰影效果

利用 Canvas 物件可以輕易的達到描繪具陰影效果的文字。


你的瀏覽器不支援此範例,請改用 Chorme Firefox


於畫面上配置 canvas 標籤,並取得其標籤參照,然後設定陰影樣式,最後將文字描繪出來即可。

    <canvas id="pcvs"   width=600 height=300    
style="border:1px dotted #0094ff;">  </canvas>
    <script>
        var cvs = document.getElementById('pcvs');
        var ctx = cvs.getContext('2d');
        //以下三行設定陰影
        ctx.shadowOffsetX = 5;
        ctx.shadowOffsetY = 5;
        ctx.shadowBlur = 10;

        var i = 0;

        var colorTxt = function () {
            // 此函式每次會重新描繪文字,陰影會重疊,每畫3次就清空一次歸零重畫
            if (i > 2) {
                i = 0;
                ctx.clearRect(0, 0, cvs.width, cvs.height);
            }
            ctx.strokeStyle = '#f00';
            ctx.shadowColor = '#f00';
            ctx.font = 'bold 36px 新細明體';
            ctx.strokeText('HTML5完美風暴', 100, 100);
            ctx.fillStyle = '#0094ff';
            ctx.shadowColor = '#0094ff';
            ctx.fillText('HTML5從零開始', 100, 200);
            i++;
        };
        var i = setInterval(function () { colorTxt() }, 300);   
    </script>



沒有留言: