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

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

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();

}

})