微信小程序canvas怎么设置字体透明度

2021/10/6 22:12:28

本文主要是介绍微信小程序canvas怎么设置字体透明度,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

微信小程序自带的设置透明度只有setGlobalAlpha,但是CanvasContext.setGlobalAlpha设置透明度,是全局透明,整张图片都透明了。所以直接使用是不行的。

换种思路实现:就是把需要加水印的图片弄成拷贝成两张(大小尺寸一样),然后一张图片加水印字体并通过CanvasContext.setGlobalAlpha设置字体透明度,然后把两张图片合并就能实现照片不透明,字体透明。

微信扫一下小程序码可以查看实现的效果:

 主要js代码逻辑:

1  var ctx= wx.createCanvasContext(‘canvanid’);
 2  var tempFilePaths =that.data.res.tempFilePaths;
 3  //获取图片基本信息
 4  wx.getImageInfo({
 5   src:tempFilePaths[0],
 6   success: function (res) {
 7   var width = res.width;
 8   var height = res.height;
11         ctx.drawImage(res.path,0,0,width,height);
12         ctx.beginPath();
13         ctx.setFontSize('15');
14         ctx.setFillStyle('red');
15         ctx.setGlobalAlpha('0.6');
16         ctx.fillText('加水印字体', 100,100);
17          wx.getImageInfo({
18             src:tempFilePaths[0],
19             success: function (res1) {
20              ctx.drawImage(res1.path,0,0,width,height);
21              ctx.draw();
22         }})
23        
24   }
25 })



这篇关于微信小程序canvas怎么设置字体透明度的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程