该性能问题仅仅会在iphone7plus（ios11.2.6）上表现非常明显，通过拖动图片(尺寸是762x979)不断调用context.drawImage()和context.draw()重绘canvas，会导致界面卡顿，体验非常不流畅！

PS:如上图，canvas性能差不是在微信6.6.2版本中已经解决，不知道是不是没有解决彻底，在iphone7plus还存在?把图片尺寸缩小一半问题同样存在。照片uploadFile:fail fail:file doesn`texist。


const app = getApp()
Page({
data: {
userInfo: {},
hasUserInfo: false,
DOCATTRIBUTES: { PAGEWIDTH: 396.938, PAGEHEIGHT: 510.349},
PAGEITEMS: [{ XPOS: 0, YPOS: 0, WIDTH: 396.938, HEIGHT: 510.211, file: './1.jpg' }, { XPOS: 99.5944, YPOS: 55.6769, WIDTH: 198.949, HEIGHT: 396.218, file: './2.jpg' }, { XPOS: 0, YPOS: 0, WIDTH: 396.938, HEIGHT: 510.211, file: './3.png'}],
width: 0,
height: 0,
editorWidth: 690, //rpx
editorHeight: 960, //rpx
canvasWidth: 0,
canvasHeight: 0,
},
bindViewTap: function() {
},
bindtouchstart:function(e){
console.log(e);
},
bindtouchmove: function (e) {
console.log(e);
var touch0 = { x: e.touches[0].x, y: e.touches[0].y };
var item = this.items[1];
item.x = touch0.x;
item.y = touch0.y;
this.updateDraw();
},
bindtouchend:function(){
},
bindtap:function(e){
console.log(e);
},
bindlongpress:function(e){
console.log(e);
},


updateDraw: function () {
var context = wx.createCanvasContext('circle')
this.items.forEach(function (item) {
context.drawImage(item.file, item.x - item.w / 2, item.y - item.h / 2, item.w, item.h);
}, this);
context.draw();
},


loadPageItems: function () {
var PAGEITEMS = this.data.PAGEITEMS;
for (var i = 0; i < PAGEITEMS.length; i++) {
var item = PAGEITEMS[i];
let x = (item.XPOS + item.WIDTH / 2) * this.templateRatio
let y = (item.YPOS + item.HEIGHT / 2) * this.templateRatio
let w = item.WIDTH * this.templateRatio
let h = item.HEIGHT * this.templateRatio
let file = item.file;
this.items.push({ x: x, y: y, w: w, h: h, file: file });
}
},


onLoad: function () {
var DOCATTRIBUTES = this.data.DOCATTRIBUTES
var ratio1 = this.data.editorWidth / DOCATTRIBUTES.PAGEWIDTH;
var ratio2 = this.data.editorHeight / DOCATTRIBUTES.PAGEHEIGHT;
var ratio = ratio1 > ratio2 ? ratio2 : ratio1;
var canvasWidth = DOCATTRIBUTES.PAGEWIDTH * ratio; //rpx
var canvasHeight = DOCATTRIBUTES.PAGEHEIGHT * ratio; //rpx
var rpx2px = app.globalData.windowWidth / 750


this.templateRatio = canvasWidth * rpx2px / DOCATTRIBUTES.PAGEWIDTH
this.setData({
width: app.globalData.windowWidth,
height: app.globalData.windowHeight,
canvasWidth: canvasWidth,
canvasHeight: canvasHeight
})
this.items = [];
this.loadPageItems();
this.updateDraw();
}
})