当前位置:主页 > 小程序开发 > API >

微信小程序设置阴影样式的对象方法setShadow

栏目:API 来源: 微信小程序开发网 阅读: 2017-03-21
ctx.setShadow(offsetX,offsetY, blur, '颜色')

—— 设置阴影样式。

参数 类型 范围 定义
offsetX Number   阴影相对于形状在水平方向的偏移
offsetY Number   阴影相对于形状在竖直方向的偏移
blur Number 0~100 阴影的模糊级别,数值越大越模糊
color Color   阴影的颜色

  我们在做一个图片时,如果想让这个图片有一个阴影例如制作logo时,让上面的文字有一个阴影,让logo有一种立体一感觉,这个可以使用photoshop作图来处理。

  如果在绘图时让我们绘制的图形也有一个阴影就可使用setShadow方法实现。

实现原理:

  在现实生活中我们看到一棵树在太阳的照射下会产生一个阴影,例如,一棵树的树枝被太阳照射后会产生一个阴影,阴影的形成是由于太阳的照射树枝产生了偏移形成的。

例如:



  在上图中下面就有一个阴影,这个阴影是相对于图片向右和向下移动了一定距离以后产生的,产生的这个距离就是偏移的距离,这样我们可以通过偏移来设置阴影。

示例:

//.wxml
<canvas canvas-id="myCanvas"/>
<button type="default" bindtap="createimage">点击设置</button>

//.js
Page({
  createimage: function () {
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.setFillStyle('#0000ff')
    ctx.setShadow(10, 30, 50, 'red')
    ctx.fillRect(10, 10, 150, 75)
    ctx.draw()
  }
})

结果: