在 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