关于Canvas官方的接口说明如下: https://developers.weixin.qq.com/minigame/dev/document/render/canvas/RenderingContext.html 但是实际测试发现,还有不少问题, Canvas Style的支持: 目前Canvas的属性只支持width和height,没有支持style的width,height,top和left. 2. Canvas getContext的支持: getContext这个函数似乎只支持传入"2d"和"webgl",无法动态支持如下属性: 2d 上下文属性: alpha: boolean值表明canvas包含一个alpha通道. 如果设置为false, 浏览器将认为canvas背景总是不透明的, 这样可以加速绘制透明的内容和图片. WebGL上下文属性: alpha: boolean值表明canvas包含一个alpha缓冲区。 depth: boolean值表明绘制缓冲区包含一个深度至少为16位的缓冲区。 stencil: boolean值表明绘制缓冲区包含一个深度至少为8位的模版缓冲区。 antialias: boolean值表明是否抗锯齿。 premultipliedAlpha: boolean值表明页面排版工人将在混合alpha通道前承担颜色缓冲区。 preserveDrawingBuffer: 如果这个值为true缓冲区将不会清除它，会保存下来，直到被清除或被使用者覆盖。 failIfMajorPerformanceCaveat: boolean值表明在一个系统性能低的环境创建该上下文。 这些属性,尤其是WebGL的属性包括depth和stencil都非常重要!!! 希望官方可以尽快支持好!!!

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();[代码][代码]}[代码]   

从官方文档有看到<<2D接口和WebGL接口的支持情况>> 0x00 Canvas2D的接口问题: 2D接口除了这个文档列出来的 globalCompositeOperation  isPointInPath 这两个接口外,似乎还有如下接口没有支持: shadowBlur shadowColor shadowOffsetX shadowOffsetY setLineDash 参考链接是:https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D 2D还有一些函数似乎有问题: stroke函数 strokeText stroke() + fillText() 这两组函数在Android上无法正常工作,没有显示stroke效果出来. 渐变函数: createLinearGradient createLinearGradient 这两组函数在创建Path是圆形渐变的时候,似乎是没办法正常工作的. 希望官方能够快速解决这些问题,方便开发者能直接使用Canvas2D开发小游戏!!!