canvas给小视频app源码中的文字增加阴影效果

canvas给小视频app源码中的文字增加阴影效果实现的相关代码

var canvas = document.getElementById('canvas');
canvas.width='300';
canvas.height='300';
var ctx = canvas.getContext('2d');
draw()

function draw(){
ctx.shadowOffsetX=-3;//用来设定阴影在 X轴的延伸距
ctx.shadowOffsetX=-3;//用来设定阴影在 Y轴的延伸距
ctx.shadowBlur = 2;//设定阴影的模糊程度 默认0
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";//设定阴影颜色效果

ctx.font = '30px Times New Roman';//设置字体样式
ctx.fillStyle = "blue";//设置字体颜色
ctx.fillText("同志们好", 100, 100);
}

 

以上就是canvas给小视频app源码中的文字增加阴影效果实现的相关代码， 更多内容欢迎关注之后的文章