HTML5之9__Canvas的ShadowAPI

本文介绍 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 上绘制阴影时，应该尽量只用一种方法

以上就是HTML5之9 __Canvas 的Shadow API 的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

查看更多关于HTML5之9__Canvas的ShadowAPI的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did65664

更新时间：2022-10-13 阅读：72次