在小程序原生中也一样,只不过uni改成wx
不管是在uni还是在原生都要指定 canvas 2d类型,如果不指定类型的话,透明化会有问题。
初始化完成以后通过getImageData属性获取到画布中每一个像素的rgba值
灰度值
const data = this.ctx.getImageData(0,0 ,width, height)let value = 0for (let i = 0; i < data.length; i+=4) {// 灰度值 = (r+g+b) / 3 rgb的平均值就是灰度值, 这个最后的3是可以调整的,可以实现深度和浅度value = Math.floor((data[i]+data[i+1]+data[i+2]) / 3);data[i] = data[i+1] = data[i+2] = value;}// 清空画布 重新添加this.ctx.clearRect(0, 0, width, height);this.ctx.putImageData(data, 0, 0)
透明化(如果canvas没有配置type类型的情况下,修改data[i+3] = 0是不会透明的, 需要对rgba都做修改)
const num = 220。// 可以通过某个交互实现画布中哪些颜色要透明哪些不需要透明for (let i = 0; i < data.length; i+=4) {if(data[i] >= num && data[i+1] >= num && data[i+2] >= num) {data[i+3] = 0 // 将rgba的。a = 0 就实现透明/**如果没有给canvas设置类型,需要对rgba都做处理data[i] = data[i+1] = data[i+2] = 0;data[i+3] = -1*/}}