收藏
回答

【已解决】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>


最后一次编辑于  03-07  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

1 个回答

  • 卢霄霄
    卢霄霄
    03-07

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

    03-07
    赞同 1
    回复 2
    • 李新爽
      李新爽
      03-07

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

      放在onready里面确实可以的。

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

      03-07
      回复
    • 卢霄霄
      卢霄霄
      03-07回复李新爽

      嘿嘿嘿

      03-07
      回复