在 JS 中使用 canvas 绘制文字并添加阴影

实现说明：

1、使用 CanvasRenderingContext2D.fillText() 这个函数来绘制文字。

2、在绘制之前通过设置 font、fillStyle 属性来调整字体样式，再通过 shadowColor、shadowOffsetX、shadowOffsetY、shadowBlur 属性来调整文字阴影

效果展示：

实现代码：

html


            <canvas id="canvas"></canvas>

javascript


            // 创建画布
            let canvas = document.getElementById('canvas');
            let ctx = canvas.getContext('2d');

            // 设置字体，粗体、字号40px、字体'Fira Sans'
            ctx.font = "bold 40px 'Fira Sans'";
            ctx.fillStyle = '#269926'; // 文字颜色

            // 设置阴影
            ctx.shadowColor = '#666'; //阴影颜色
            ctx.shadowOffsetX = 4; //偏移
            ctx.shadowOffsetY = 4;
            ctx.shadowBlur = 5; //模糊程度

            // 开始绘制
            ctx.fillText("带阴影的文字", 0, 40);

代码说明：

其中变量 ctx 为一个 CanvasRenderingContext2D对象，我们用到它的以下属性与函数：

版权声明：[自由转载-注明出处-非商用-非衍生] (知识共享许可协议)
back home