HTML5之9 __Canvas 的Shadow API

本文介绍 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('trails');
        var context = canvas.getContext('2d');
        context.save();
        context.font = "60px impact";
        context.fillStyle = '#996600'
        context.textAlign = 'center';

        // 设置文字阴影的颜色为黑色,透明度为20%
        context.shadowColor = 'rgba(0, 0, 0, 0.2)';

        // 将阴影向右移动15px, 向上移动10px
        context.shadowOffsetX = 15;
        context.shadowOffsetY = -10;

        // 轻微模糊阴影
        context.shadowBlur = 2;
        context.fillText('Happy Trails!', 200, 60, 400);
        context.restore();
    }
</script>
</html>
运行效果图

以上是由CSS样式生成的阴影,它只有位置上的变化,而无法与之前介绍的变换生成的阴影(树影)保持同步.  为了一致起见, 在canvas 上绘制阴影时,应该尽量只用一种方法

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值