canvas加载模型，如何设置背景透明？
在小米8（android 8.1.0版本）背景是透明的。
在小米8和其它手机（android 9.0版本）背景是黑的。
请问是否和android版本有关，如何兼容其它手机和android版本？
收藏
回答
置顶canvas（webgl)背景透明功能精选热门
myf2019-07-10
| 框架类型 | 问题类型 | API/组件名称 | 终端类型 | 微信版本 | 基础库版本 |
|---|---|---|---|---|---|
| 小程序 | Bug | canvas | 客户端 | 7.0.5 | 2.7.3 |
4 个回答
请 登录 后发表内容
相关问题
相关文档
- Canvas.getContext: 小程序/开发/API/画布/Canvas/Canvas.getContext
- Canvas.getContext#参数: 小程序/开发/API/画布/Canvas/Canvas.getContext
- Canvas.getContext#功能描述: 小程序/开发/API/画布/Canvas/Canvas.getContext
- Canvas.getContext#返回值: 小程序/开发/API/画布/Canvas/Canvas.getContext
- Canvas.cancelAnimationFrame: 小程序/开发/API/画布/Canvas/Canvas.cancelAnimationFrame
webgl 的 alpha 通道会在下个版本支持。
还有问题的可以试下这个代码，我是从 threeJS 源码拿出来的，在几台安卓机器上都可以透明，不加则不透明。webGLCanvasId 设置你们的ID。如果用 threeJS，canvas 和 glContext 要传到 threeJS 里面。
wx.createSelectorQuery()
.select(`#${webGLCanvasId}`)
.node()
.exec((res) => {
const canvas = res[0].node;
const glContext = canvas.getContext('webgl', {
alpha: true,
depth: true,
stencil: true,
antialias: true,
premultipliedAlpha: true,
preserveDrawingBuffer: false,
powerPreference: 'default',
failIfMajorPerformanceCaveat: false,
xrCompatible: true
});
// 安卓手机需要调用这个来设置透明
glContext.clear(17664); // 这个数值根据 threeJS 源码得来
});
改成下面两个
glContext.clearColor(0, 0, 0, 0);
glContext.clear(glContext.COLOR_BUFFER_BIT);
这个应该是webgl设置透明背景这块有点问题，一部分机型是透明的，一部分是黑底，官方收到了这个问题的反馈，不知道下个版本是否会修复，还是说有什么特殊方法能解决这个bug
楼楼，请教一下如何把模型正常加载到canvas上？我这加载一个three的正方体老是不对。
代码贴上来看一I下
var app = getApp();
var THREE = app.THREE;
var requestAnimationFrame;
var camera, scene, renderer,canvas;
Page({
data: {
height: '360',
width: '20',
},
onLoad() {
// wx.authorize({ scope: "scope.camera" });//scope.record
// this.ctx = wx.createCameraContext();
wx.getSystemInfo({
success: res => {
this.setData({ height: res.windowHeight, width: res.windowWidth });
},
})
},onReady(){
var self = this;
const query = wx.createSelectorQuery()
query.select('#myCanvas').node().exec((res) => {
console.log(res);
canvas = res[0].node;
console.log(canvas);
canvas.requestAnimationFrame(self.animate());
//self.init(canvas);
const gl = canvas.getContext('webgl');
gl.clearColor(1, 0, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
})
},
init: function (canvas) {
camera = new THREE.PerspectiveCamera(45, canvas._width / canvas._height, 0.01, 10000);
scene = new THREE.Scene();
//scene.background = new THREE.Color(0xffffff);
renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
var light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 0, 1);
scene.add(light);
var cube = new THREE.Mesh(new THREE.CubeGeometry(0.1, 0.1, 0.1),
new THREE.MeshBasicMaterial({
color: 0xff0000
})
);
scene.add(cube);
cube.rotation.set(45,0,0);
cube.position.set(0, 0, -2);
},
render: function () {
// camera.position.x += (mouseX - camera.position.x) * 0.05;
// camera.position.y += (- mouseY - camera.position.y) * 0.05;
// camera.lookAt(scene.position);
renderer.render(scene, camera);
},
animate: function () {
//requestAnimationFrame(this.animate);
if (canvas && !renderer)
{
// console.log(height);
// canvas._width = width;
// canvas._height = height;
// canvas._left = 0;
// canvas._top = 0;
console.log(canvas._width);
this.init(canvas);
}
console.log(renderer);
if (renderer){
this.render();
}
},
error(e) {
wx.authorize({ scope: "scope.camera" });
console.log(e.detail)
}
})
<canvas type="webgl" id="myCanvas" style="width: {{width}}px; height: {{height}}px;z-index:111;" ></canvas>
<camera device-position="back" flash="off" binderror="error" style="width: {{width}}px; height: {{height}}px;z-index: 100;" > </camera>
什么地方不对？
const gl = canvas.getContext('webgl');
gl.clearColor(1, 0, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
这三行要注释一下哦