收藏
回答

【已解决】Canvas 一样的代码,放在onload中不行,

按照例程上面的代码,使用onload()触发无法画出此渐变,写了个click事件却可以。困惑

onload: function() {
  const ctx = wx.createCanvasContext('myCanvas')
 
  // Create linear gradient
  const grd = ctx.createLinearGradient(0, 0, 200, 0)
  grd.addColorStop(0, 'red')
  grd.addColorStop(1, 'white')
 
  // Fill with gradient
  ctx.setFillStyle(grd)
  ctx.fillRect(10, 10, 150, 80)
  ctx.draw()
},
 
drawCanvas: function () {
  const ctx = wx.createCanvasContext('myCanvas')
 
  // Create linear gradient
  const grd = ctx.createLinearGradient(0, 0, 200, 0)
  grd.addColorStop(0, 'red')
  grd.addColorStop(1, 'white')
 
  // Fill with gradient
  ctx.setFillStyle(grd)
  ctx.fillRect(10, 10, 150, 80)
  ctx.draw()
}



<canvas
  canvas-id='myCanvas'
  style='margin:5px; border:1px solid #d3d3d3;'
  bindtouchstart='start'
  bindtouchmove='move'
  bindtouchend='end'/>
 
 
<view hidden="{{hidden}}">
  Coordinates:({{x}}, {{y}})
</view>
 
<view bindtap='drawCanvas'>click me</view>


最后一次编辑于  2019-03-07
回答关注问题邀请回答
收藏

1 个回答

  • 卢霄霄
    卢霄霄
    2019-03-07

    onLoad里 canvas组件还没被渲染出来,最快也得在onReady里

    2019-03-07
    有用 1
    回复 2
    • 2019-03-07

      谢谢  ,我想着应该会是这样,但是看着例程中的话就给略过了

      放在onready里面确实可以的。

      JS:(我们在接下来的例子中会将 JS 放在 onLoad 中)

      2019-03-07
      回复
    • 卢霄霄
      卢霄霄
      2019-03-07回复

      嘿嘿嘿

      2019-03-07
      回复
登录 后发表内容