微信小程序加渐变阴影

//(300,10, 300, 300)可调整这几个数值决定矩形阴影是横向渐变还是纵向渐变

const grd = deliverctx.createLinearGradient(300,10, 300, 300);

grd.addColorStop(0, '#02B591')

grd.addColorStop(0.6, '#F6F9FF')

grd.addColorStop(0.9, '#6FFFE9')

grd.addColorStop(1, '#ffffff')

grd.fillStyle = "2d"

deliverctx.setFillStyle(grd); //将渐变色渲染入正方形

 

deliverctx.save();

deliverctx.beginPath();

//设置路径起点坐标

deliverctx.setGlobalAlpha(0.4)

//设置阴影底部的最左边位置

deliverctx.lineTo(width, 300)

//画阴影

for (var i = 0; i <att.length; i++) {

var attObj = att[i];

var space = width / att.length * 0.5

// //坐标

var space = width * 0.5

var x1 = width

var x = width * (i + 1)

var y = getpx(thisObj.data.maxProgressHeight) - getpx(attObj.height) + initheight;

 

deliverctx.lineTo(x, getpx(y)) //终点

}

//底部终点位置

deliverctx.lineTo(width * att.length, 300)

//先关闭绘制路径。注意，此时将会使用直线连接当前端点和起始端点。

deliverctx.closePath();

deliverctx.clip();

//然后画线

//阴影不随像素的改变而改变

function getpx(x) {

return x / 750 * wx.getSystemInfoSync().windowWidth

}