开放数据域画一张本地的图片加载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(); }}); |
建议先检查一下路径？
找到问题了， drawImage写错了
开放数据域里的canvas和context要重新创建过的，不能跟主域共用；没看到你完整的代码，但我猜测是context的原因。
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();}});