开放数据域画一张本地的图片加载onerror，在开发者工具里面的，没试过真机，原先图片的位置fillRect画纯色没问题。 var bgImage = wx.createImage(); bgImage.onload = function () { image.width = width; image.height = height; context.drawImage(image, left, top, width, height); } bgImage.onerror = function (error) { console.log("error", error); } bgImage.src = "image/di.png"; [图片] [图片] 开放数据域完整代码： [代码]var[代码] [代码]friendsData = [];[代码][代码]var[代码] [代码]sharedCanvas = wx.getSharedCanvas();[代码][代码]var[代码] [代码]sharedWidth = sharedCanvas.width;[代码][代码]var[代码] [代码]sharedHeight = sharedCanvas.height;[代码][代码]var[代码] [代码]context = sharedCanvas.getContext([代码][代码]'2d'[代码][代码]);[代码] [代码]var[代码] [代码]topOffset = 0;[代码][代码]// offset按理来说应该都是负数[代码][代码]var[代码] [代码]minOffset = 0;[代码] [代码]var[代码] [代码]lastTouchedY = 0;[代码] [代码]function[代码] [代码]roundRect(ctx, image, x, y, w, h, r) {[代码][代码]    [代码][代码]var[代码] [代码]min_size = Math.min(w, h);[代码][代码]    [代码][代码]if[代码] [代码](r > min_size / 2) r = min_size / 2;[代码][代码]    [代码][代码]ctx.beginPath();[代码][代码]    [代码][代码]ctx.moveTo(x + r, y);[代码][代码]    [代码][代码]ctx.arcTo(x + w, y, x + w, y + h, r);[代码][代码]    [代码][代码]ctx.arcTo(x + w, y + h, x, y + h, r);[代码][代码]    [代码][代码]ctx.arcTo(x, y + h, x, y, r);[代码][代码]    [代码][代码]ctx.arcTo(x, y, x + w, y, r);[代码][代码]    [代码][代码]ctx.closePath();[代码][代码]}[代码]  [代码]function[代码] [代码]initFriendsData() {[代码][代码]    [代码][代码]// wx.setUserCloudStorage({[代码][代码]    [代码][代码]//     KVDataList: [{ key: "rank-score", value: "10" }][代码][代码]    [代码][代码]// });[代码][代码]    [代码][代码]wx.getFriendCloudStorage({[代码][代码]        [代码][代码]keyList: [[代码][代码]"rank-score"[代码][代码]],[代码][代码]        [代码][代码]success: [代码][代码]function[代码] [代码](res) {[代码][代码]            [代码][代码]friendsData = [];[代码][代码]            [代码][代码]for[代码] [代码]([代码][代码]var[代码] [代码]index = 0; index < res.data.length; ++index) {[代码][代码]                [代码][代码]var[代码] [代码]user = res.data[index];[代码][代码]                [代码][代码]user.avatarUrl;[代码][代码]                [代码][代码]user.nickname;[代码][代码]                [代码][代码]user.openid;[代码] [代码]                [代码][代码]var[代码] [代码]userData = {};[代码][代码]                [代码][代码]userData.avatarUrl = user.avatarUrl;[代码][代码]                [代码][代码]userData.nickname = user.nickname;[代码][代码]                [代码][代码]for[代码] [代码]([代码][代码]var[代码] [代码]dataIndex = 0; dataIndex < user.KVDataList.length; ++dataIndex) {[代码][代码]                    [代码][代码]var[代码] [代码]data = user.KVDataList[dataIndex];[代码][代码]                    [代码][代码]userData.key = data.key;[代码][代码]                    [代码][代码]userData.value = data.value;[代码][代码]                [代码][代码]}[代码][代码]                [代码][代码]friendsData.push(userData);[代码][代码]            [代码][代码]}[代码][代码]            [代码][代码]friendsData = friendsData.sort([代码][代码]function[代码][代码](a, b) {[代码][代码]                [代码][代码]return[代码] [代码]parseInt(a.value) > parseInt(b.value);[代码][代码]            [代码][代码]});[代码][代码]            [代码][代码]drawSharedCanvas([代码][代码]true[代码][代码]);[代码][代码]            [代码][代码]addTouchEvent();[代码][代码]        [代码][代码]}[代码][代码]    [代码][代码]});[代码][代码]}[代码] [代码]function[代码] [代码]addTouchEvent() {[代码][代码]    [代码][代码]wx.offTouchStart();[代码][代码]    [代码][代码]wx.offTouchMove();[代码][代码]    [代码][代码]wx.onTouchStart([代码][代码]function[代码][代码](event) {[代码][代码]        [代码][代码]lastTouchedY = event.changedTouches[0].pageY;[代码][代码]    [代码][代码]});[代码][代码]    [代码][代码]wx.onTouchMove([代码][代码]function[代码][代码](event) {[代码][代码]        [代码][代码]var[代码] [代码]touchedY = event.changedTouches[0].pageY;[代码] [代码]        [代码][代码]var[代码] [代码]changed = touchedY - lastTouchedY;[代码][代码]        [代码][代码]lastTouchedY = touchedY;[代码][代码]        [代码][代码]topOffset = topOffset + changed;[代码][代码]        [代码][代码]if[代码] [代码](topOffset >= 0) {[代码][代码]            [代码][代码]topOffset = 0;[代码][代码]        [代码][代码]}[代码][代码]        [代码][代码]if[代码] [代码](topOffset < minOffset) {[代码][代码]            [代码][代码]topOffset = minOffset;[代码][代码]        [代码][代码]}[代码][代码]        [代码][代码]drawSharedCanvas([代码][代码]false[代码][代码]);[代码][代码]    [代码][代码]});[代码][代码]}[代码] [代码]function[代码] [代码]drawSharedCanvas(isInit) {[代码][代码]    [代码][代码]context.clearRect(0, 0, sharedWidth, sharedHeight);[代码] [代码]    [代码][代码]// 背景可以不画，这样背景就是透明的，由lua来画背景就可以了[代码][代码]    [代码][代码]context.fillStyle = [代码][代码]"red"[代码][代码];[代码][代码]    [代码][代码]context.fillRect(0, 0, sharedWidth, sharedHeight);[代码] [代码]    [代码][代码]for[代码] [代码]([代码][代码]var[代码] [代码]i = 0; i < friendsData.length; ++i) {[代码][代码]        [代码][代码]([代码][代码]function[代码] [代码](i, user, isInit) {[代码][代码]            [代码][代码]var[代码] [代码]user = friendsData[i];[代码][代码]            [代码][代码]var[代码] [代码]index = parseInt(i);[代码][代码]            [代码][代码]var[代码] [代码]top = (70 * index) + ((index + 1) * 10) + topOffset;[代码][代码]            [代码][代码]var[代码] [代码]left = sharedWidth * 0.1;[代码][代码]            [代码][代码]var[代码] [代码]width = sharedWidth * 0.8;[代码][代码]            [代码][代码]var[代码] [代码]height = 70;[代码] [代码]            [代码][代码]// context.fillStyle = "green";[代码][代码]            [代码][代码]// context.fillRect(left, top, width, height);[代码][代码]            [代码][代码]var[代码] [代码]bgImage = wx.createImage();[代码][代码]            [代码][代码]bgImage.onload = [代码][代码]function[代码] [代码]() {[代码][代码]                [代码][代码]console.log([代码][代码]"=================================================================="[代码][代码]);[代码][代码]                [代码][代码]console.log([代码][代码]"onload"[代码][代码]);[代码][代码]                [代码][代码]bgImage.width = width;[代码][代码]                [代码][代码]bgImage.height = height;[代码][代码]                [代码][代码]context.drawImage(bgImage, left, top, width, height);[代码][代码]            [代码][代码]}[代码][代码]            [代码][代码]bgImage.onerror = [代码][代码]function[代码] [代码](error) {[代码][代码]                [代码][代码]console.log([代码][代码]"=================================================================="[代码][代码]);[代码][代码]                [代码][代码]console.log([代码][代码]"error"[代码][代码], error);[代码][代码]            [代码][代码]}[代码][代码]            [代码][代码]bgImage.src = [代码][代码]"image/di.png"[代码][代码];[代码] [代码]            [代码][代码]// 画头像[代码][代码]            [代码][代码]var[代码] [代码]image = wx.createImage();[代码][代码]            [代码][代码]image.onload = [代码][代码]function[代码] [代码]() {[代码][代码]                [代码][代码]image.width = 50;[代码][代码]                [代码][代码]image.height = 50;[代码][代码]                [代码][代码]context.save();[代码][代码]                [代码][代码]roundRect(context, image, left + 10, top + 10, 50, 50, 10);[代码][代码]                [代码][代码]context.clip();[代码][代码]                [代码][代码]context.drawImage(image, left + 10, top + 10, 50, 50);[代码][代码]            [代码][代码]}[代码][代码]            [代码][代码]image.src = user.avatarUrl;[代码] [代码]            [代码][代码]// 画昵称[代码][代码]            [代码][代码]context.fillStyle = [代码][代码]"yellow"[代码][代码];[代码][代码]            [代码][代码]context.font = [代码][代码]"25px '微软雅黑'"[代码][代码];[代码][代码]            [代码][代码]context.textBaseline = [代码][代码]"middle"[代码][代码];[代码][代码]            [代码][代码]context.fillText(user.nickname, left + 70, top + 37.5);[代码] [代码]            [代码][代码]// 画分数[代码][代码]            [代码][代码]context.fillStyle = [代码][代码]"blue"[代码][代码];[代码][代码]            [代码][代码]context.fillText([代码][代码]"得分: "[代码] [代码]+ user.value, width - 100, top + 37.5);[代码] [代码]            [代码][代码]if[代码] [代码](isInit) {[代码][代码]                [代码][代码]minOffset = (top + 80 - sharedHeight) * (-1);[代码][代码]                [代码][代码]if[代码] [代码](minOffset > 0) {[代码][代码]                    [代码][代码]minOffset = 0;[代码][代码]                [代码][代码]}[代码][代码]                [代码][代码]if[代码] [代码](minOffset < minOffset) {[代码][代码]                    [代码][代码]minOffset = minOffset;[代码][代码]                [代码][代码]}[代码][代码]            [代码][代码]}[代码][代码]        [代码][代码]})(i, friendsData[i], isInit);[代码][代码]    [代码][代码]}[代码][代码]}[代码] [代码]wx.onMessage([代码][代码]function[代码][代码](data) {[代码][代码]    [代码][代码]if[代码] [代码](data.command === [代码][代码]'init'[代码][代码]) {[代码][代码]        [代码][代码]sharedWidth = sharedCanvas.width;[代码][代码]        [代码][代码]sharedHeight = sharedCanvas.height;[代码][代码]        [代码][代码]initFriendsData();[代码][代码]    [代码][代码]}[代码][代码]});[代码]