我这边用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)
}
使用webgl的同学们注意了,小游戏只有上屏canvas可以看到,如果是用threeJS 就需要用到2个场景和摄像机 (一个正交,一个透视) 正交摄像机可以实现2D效果 透视实现3d
我发现不同点了,我在fillText之前对画布旋转了90度,这个时候字就出不来,我要是不旋转画布字就可以正常显示,希望这个问题可以修复一下
你自己也说了,文字是画在了离屏画布上。
离屏画布的内容只有绘制到上屏画布上才能显示在屏幕上,而你并没有做这件事。
请自行搜索 WebGL 绘图的相关示例和教程。
我也遇到了跟他一样的问题,模拟器可以显示,真机就不显示,我是创建的离屏画布,写完字之后 ,传给THREE的Texture了,但是屏幕上始终没有字,模拟器有真机没有,不知道啥情况。
下面代码里的 theCanvas 就是创建的那个离屏画布
var theMaterial = new THREE.MeshBasicMaterial();
theMaterial.map = new THREE.Texture(theCanvas);
theMaterial.map.minFilter = THREE.LinearFilter;
theMaterial.map.needsUpdate = true;
//把画布用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)
求助各位大兄弟和小姐姐们了