小程序canvas遇到的问题
钢翼
编程
将html5的canvas移植到小程序中,需要注意以下问题:
1.由于不使用Dom,不使用以下代码获取canvas对象
var canvas = document.querySelector("#canvas");
var context = canvas.getContext("2d")而是采用以下代码直接获取,但是注意不要频繁调用,可使用本地变量存储,否则可能会导致重新渲染
const context = wx.createCanvasContext("canvas");2.由于不会自动渲染,需要主动调用以下代码进行渲染
context.draw();//清空画布后渲染 context.draw(true);//保留画布内容渲染
3.如果通过路径描边划线,在touchmove事件中注意调用顺序才能保持连贯,如下:
context.lineTo(x, y);//路径绘制到当前位置 context.stroke();//路径描边 context.draw(true);//保留画布内容渲染 context.moveTo(x, y);//移动到最新位置
4.使用cover-view虽可以置于canvas之上,但是由于渲染问题无法动态变更样式文案,尽量避免使用。