小程序同时绘制阴影与渐变色

最新推荐文章于 2023-08-02 17:34:24 发布

踏着阳光

最新推荐文章于 2023-08-02 17:34:24 发布

阅读量621

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/qq_35014708/article/details/104753231

版权

小程序专栏收录该内容

6 篇文章 0 订阅

订阅专栏


//获取应用实例
const app = getApp()

Page({

   onLoad: async function () {
     //小程序渐变色和阴影不能够同时设置，只能初始化一方再设置另一方
    const ctx = wx.createCanvasContext('canvas')
    
    ctx.beginPath()
    ctx.setFillStyle("#fff");
    ctx.setShadow(0, 0, 20, "rgba(0, 0, 0, 0.5)");
    ctx.fillRect(10, 10, 150, 80)

    ctx.beginPath()
    const grd = ctx.createLinearGradient(0, 0, 200, 0)
    grd.addColorStop(0, 'red')
    grd.addColorStop(1, 'white')
    ctx.setFillStyle(grd)
    ctx.fillRect(10, 10, 150, 80)
    ctx.closePath()
    ctx.draw()
  },
})