- 当前 Bug 的表现（可附上截图） 注：目前只有华为的手机和平板会有这个问题。其他手机：Android，iOS都正常表现。 用离屏的webgl canvas渲染到上屏的canvas 2D环境，只有在华为的android手机上，看不到webgl的内容。 下图中，彩色的三角形和四边形，就是用webgl渲染的；但是看不到； [图片] - 预期表现 [图片] - 复现路径 https://developers.weixin.qq.com/s/L4gO2NmP7d6B - 提供一个最简复现 Demo https://developers.weixin.qq.com/s/L4gO2NmP7d6B 重点代码在最后几行。   [代码]function[代码] [代码]tick() {[代码][代码]    [代码][代码]requestAnimationFrame(tick);[代码][代码]    [代码][代码]drawScene();[代码][代码]    [代码][代码]animate();[代码] [代码] [代码] [代码]    // 将3D纹理拷贝到2D纹理上。[代码] [代码]    contextMain[代码][代码].clearRect(0 ,0, canvasMain.width, canvasMain.height);[代码][代码][代码]    contextMain[代码].drawImage(canvas3D, 0, 0);[代码][代码]    [代码][代码][代码]contextMain[代码].fillStyle = [代码][代码]"#FFFFFF"[代码][代码]    [代码][代码][代码]contextMain[代码].fillRect(0, 0, 100, 100);[代码][代码]}[代码] let contextMain = undefined;  [代码]let canvasMain = undefined;[代码][代码]let canvas3D = undefined;[代码] [代码]function[代码] [代码]webGLStart(canvas) {[代码] [代码]    [代码][代码]canvasMain = canvas;[代码] [代码]    contextMain= [代码]canvasMain.getContext([代码][代码]'2d'[代码][代码]);[代码][代码] [代码][代码] [代码][代码] [代码][代码]    // 创建离屏webgl环境[代码][代码] [代码]    [代码][代码]canvas3D = wx.createCanvas();[代码][代码]    [代码][代码]canvas3D.width  = canvasMain.width;[代码][代码]    [代码][代码]canvas3D.height = canvasMain.height[代码] [代码]    [代码][代码]initGL(canvas3D);[代码][代码]    [代码][代码]initShaders();[代码][代码]    [代码][代码]initBuffers();[代码] [代码]    [代码][代码]gl.clearColor(0.0, 0.0, 0.0, 1.0);[代码][代码]    [代码][代码]gl.enable(gl.DEPTH_TEST);[代码] [代码]    [代码][代码]tick();[代码][代码]}[代码] [代码]GameGlobal.alert = (...msg) => console.log([代码][代码]"alert"[代码][代码], ...msg);[代码] [代码]webGLStart(wx.createCanvas());[代码]

- 当前 Bug 的表现（可附上截图）     这个问题存在半年多了，也发过很多次贴，之前说修复了，问题还是存在，再次发帖也没回音了，还修不修复这个问题了？ - 预期表现 - 复现路径 - 提供一个最简复现 Demo https://developers.weixin.qq.com/community/develop/doc/0002c29bbb00b81e03a71690f51000

Canvas 2D 的clip()函数有非常严重的性能问题, 导致现在所有的游戏引擎(cocos2d-js,白鹭,laya) 都不推荐大家使用默认的"2D"模式,而是推荐大家使用WebGL模式. 小游戏的Canvas2D的clip()函数在,path很复杂的情况下,性能非常低下,不知道官方是否有针对Canvas2D的 Path函数进行过性能测试,实际游戏的场景是惨不忍睹的. 比如我要在主场景绘制一个不断摇摆的小人,通常这个人物的眼睛,手臂,身体,头部等,都是放在一个大图上的. 在Canvas2D模式下,我需要使用clip()函数,将这些图片分别裁剪下来,然后再贴到主场景下. 但是这样下来,主场景的帧率非常低! 完全没办法正常运行. 但是在手机浏览器下却非常流畅~ 希望官网能够正视下这个问题,能够快速解决,这样Canvas2D模式才能被正常使用! 贴一个可以测试clip()函数的case,希望官方能够重视下.  链接在:https://testdrive-archive.azurewebsites.net/Graphics/CanvasPad/Default.html [代码]                   [代码][代码]// Create a timer[代码][代码]var[代码] [代码]index = 0;[代码][代码]timer1 = setInterval(renderLoop, 16);[代码] [代码]function[代码] [代码]renderLoop() [代码][代码]{[代码][代码]  [代码][代码]if[代码] [代码](index > 600) index = 0;[代码][代码]  [代码][代码]index += 4;[代码][代码]  [代码][代码]draw(index);[代码][代码]}[代码] [代码]function[代码] [代码]draw(x) [代码][代码]{[代码][代码]  [代码][代码]ctx.fillStyle = [代码][代码]"black"[代码][代码];[代码][代码]  [代码][代码]ctx.fillRect(0, 0, 400, 500);[代码] [代码]  [代码][代码]// Create a clipping region[代码][代码]  [代码][代码]ctx.save();[代码][代码]  [代码][代码]ctx.beginPath();[代码][代码]  [代码][代码]ctx.arc(x, x, 200, 0, Math.PI * 2, [代码][代码]true[代码][代码]);[代码][代码]  [代码][代码]ctx.clip();[代码] [代码]  [代码][代码]// Create a white background[代码][代码]  [代码][代码]ctx.fillStyle = [代码][代码]"white"[代码][代码];[代码][代码]  [代码][代码]ctx.fillRect(0, 0, 400, 500);[代码] [代码]  [代码][代码]// Draw smiley[代码][代码]  [代码][代码]drawSmiley();[代码][代码] [代码] [代码]  [代码][代码]// Restore state[代码][代码]  [代码][代码]ctx.restore();[代码][代码]}         [代码] [代码]function[代码] [代码]drawSmiley()[代码][代码]{[代码][代码]  [代码][代码]// Draw eye[代码][代码]  [代码][代码]ctx.lineWidth = 20;[代码][代码]  [代码][代码]ctx.beginPath();[代码][代码]  [代码][代码]ctx.moveTo(230, 130);[代码][代码]  [代码][代码]ctx.bezierCurveTo(230, 130, 230, 130, 230, 210);[代码][代码]  [代码][代码]ctx.stroke();[代码] [代码]  [代码][代码]// Draw eye[代码][代码]  [代码][代码]ctx.beginPath();[代码][代码]  [代码][代码]ctx.moveTo(170, 130);[代码][代码]  [代码][代码]ctx.bezierCurveTo(170, 130, 170, 130, 170, 210);[代码][代码]  [代码][代码]ctx.stroke();[代码] [代码]  [代码][代码]// Draw smile[代码][代码]  [代码][代码]ctx.beginPath();[代码][代码]  [代码][代码]ctx.moveTo(100, 230);[代码][代码]  [代码][代码]ctx.bezierCurveTo(100, 230, 200, 380, 300, 230);[代码][代码]  [代码][代码]ctx.stroke();[代码] [代码]  [代码][代码]// Draw tongue[代码][代码]  [代码][代码]ctx.beginPath();[代码][代码]  [代码][代码]ctx.moveTo(219, 298);[代码][代码]  [代码][代码]ctx.bezierCurveTo(278, 351, 315, 315, 277, 258);[代码][代码]  [代码][代码]ctx.stroke();[代码][代码]}[代码]