api介绍

可以通过几种全局context属性来控制阴影。
​​​shadowColor​​​任何CSS中的颜色值。可以使用透明度（alpha）
​​​ShadowOffsetX​​​像素值。值为正数，向右移动阴影；值为负数，向左移动阴影
​​​shadowOffsetY​​​像素值。值为正数，向下移动阴影；值为负数，向上移动阴影
​​​shadowBlur​​高斯模糊值。值越大，阴影边缘越模糊

案例代码

canvas内的字体实现阴影效果_canvas

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus?">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>练习</title>
    <style>
        #myCanvas {
            background-color:#00ffff
        }
    </style>
</head>
<body>
<canvas id="myCanvas" width="1072" height="200">您的浏览器不支持canvas！</canvas>
<script type="text/javascript">
    var canvas=document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    // 设置文字阴影的颜色为黑色，透明度为20%
    context.shadowColor = 'rgba(0, 0, 0, 0.2)';
    // 将阴影向右移动15px，向上移动10px
    context.shadowOffsetX = 2;
    context.shadowOffsetY = 2;
    // 轻微模糊阴影
    context.shadowBlur = 2;
    // 字号为60px，字体为impact
    context.font = "100px 楷体";
    // 将文本填充为棕色
    context.fillStyle = '#ffffff';
    // 将文本设为居中对齐
    context.textAlign = 'center';
    context.textBaseline='middle';
    // 在canvas顶部中央的位置，以大字体的形式显示文本
    context.fillText('现在学习也不晚', 536, 100);
    context.restore();
</script>
</body>
</script>
</html>