收藏
回答

小游戏离屏画布上绘制文本,不显示

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小游戏 Bug 工具

我这边用canvas首次创建的是webgl的上下文,之后我再用 wx.createCanvas()创建离屏画布,调用的ctx2d.getContext('2d')来生成2d的上下文,我想在这个2d的离屏画布里绘制文字,但是文字始终都无法渲染到屏幕上,不知道该怎么办,请问有大兄弟或者小姐姐知道该怎么办吗,萌新不懂啊


import './libs/weapp-adapter'

let _ctxGL = canvas.getContext('webgl');

window.requestAnimationFrame(loop)


function loop() {

let ctx = document.createElement('canvas').getContext('2d')


ctx.fillStyle = '#ffffff'

ctx.fillRect(0, 0, window.innerWidth, window.innerHeight)


ctx.fillStyle = '#000000'

ctx.font = `${parseInt(window.innerWidth / 20)}px Arial`

ctx.fillText('欢迎使用代码片段', 10, window.innerHeight * 1 / 5)

ctx.fillText('可在控制台查看代码片段的说明和文档', 10, window.innerHeight * 1 / 5 + 30)


window.requestAnimationFrame(loop)

}



回答关注问题邀请回答
收藏

4 个回答

  • web~
    web~
    2020-12-30

    使用webgl的同学们注意了,小游戏只有上屏canvas可以看到,如果是用threeJS 就需要用到2个场景和摄像机 (一个正交,一个透视) 正交摄像机可以实现2D效果 透视实现3d

    2020-12-30
    有用
    回复
  • 海阔天空®
    海阔天空®
    2018-05-26

    我发现不同点了,我在fillText之前对画布旋转了90度,这个时候字就出不来,我要是不旋转画布字就可以正常显示,希望这个问题可以修复一下

    2018-05-26
    有用
    回复
  • 白开水
    白开水
    2018-05-06

    你自己也说了,文字是画在了离屏画布上。

    离屏画布的内容只有绘制到上屏画布上才能显示在屏幕上,而你并没有做这件事。

    请自行搜索 WebGL 绘图的相关示例和教程。

    2018-05-06
    有用
    回复 2
    • 海阔天空®
      海阔天空®
      2018-05-26

      我也遇到了跟他一样的问题,模拟器可以显示,真机就不显示,我是创建的离屏画布,写完字之后 ,传给THREE的Texture了,但是屏幕上始终没有字,模拟器有真机没有,不知道啥情况。

      下面代码里的 theCanvas 就是创建的那个离屏画布

      var theMaterial = new THREE.MeshBasicMaterial();

      theMaterial.map = new THREE.Texture(theCanvas);

      theMaterial.map.minFilter = THREE.LinearFilter;

      theMaterial.map.needsUpdate = true;


      2018-05-26
      回复
    • 阿白
      阿白
      2019-05-17回复海阔天空®

      //把画布用CanvasTexture做材质渲染到游戏场景中,这个段代码在ios和android上都成功显示。给大家做个参考。

      //2d游戏需要把离屏canvas作为图像会在到上平canvas上面。

      //遇到问题在google上面搜索下,google的搜索质量和效率真心比国内搜索引擎高很多。

      //创建离屏画布

      this.sharedCanvas = wx.createCanvas()
       
      let cvs = this.sharedCanvas.getContext('2d')
       
      // 缩放到像素比 使之高清
       
       
      this.sharedCanvas.width = this.width * this.ratio
       
      this.sharedCanvas.height = this.height * this.ratio
       
       
      cvs.fillStyle = '#ff0000'
       
      cvs.font = '20px Arial'
       
      cvs.textAlign = 'left'
       
      cvs.fillText('测试文本', 100, 100)
       
       
       
      this.testTexture = new THREE.CanvasTexture(this.sharedCanvas)
       
       
      this.testTexture .minFilter = this.testTexture .magFilter = THREE.LinearFilter
       
      this.testTexture .needsUpdate = true
       
       
       
      let geometry = new THREE.PlaneGeometry(this.width, this.height)
       
      let material = new THREE.MeshBasicMaterial({ map: this.testTexture , transparent: true, opacity: 1 })
       
      this.panel= new THREE.Mesh(geometry, material)
       
      this.scene.add(this.panel)


      2019-05-17
      回复
  • 2018-05-04

    求助各位大兄弟和小姐姐们了

    2018-05-04
    有用
    回复
登录 后发表内容