canvas给文字增加阴影效果

不念不忘少年蓝@ 2021-07-24 19:06 688阅读 0赞 
  1. var canvas = document.getElementById('canvas');
  2.         canvas.width='300';
  3.         canvas.height='300';
  4.         var ctx = canvas.getContext('2d');
  5.         draw()
  7.         function draw(){
  8.             ctx.shadowOffsetX=-3;//用来设定阴影在 X轴的延伸距
  9.             ctx.shadowOffsetX=-3;//用来设定阴影在 Y轴的延伸距
  10.             ctx.shadowBlur = 2;//设定阴影的模糊程度 默认0
  11.              ctx.shadowColor = "rgba(0, 0, 0, 0.5)";//设定阴影颜色效果
  13.             ctx.font = '30px Times New Roman';//设置字体样式
  14.             ctx.fillStyle = "blue";//设置字体颜色
  15.                ctx.fillText("同志们好", 100, 100);
  16.         }

代码执行效果：

20210115193140211.png

发表评论

表情：
评论列表 （有 0 条评论，688人围观）

还没有评论，来说两句吧...

相关阅读