使用wx.canvasContext.createLinearGradient接口画的渐变色。 iphone7月12日更新之后正常显示。 [图片] Android还是显示不正常。 [图片] [代码]<[代码][代码]image[代码] [代码]class[代码][代码]=[代码][代码]"chart_canvas"[代码] [代码]src[代码][代码]=[代码][代码]"{{canvasImgSrc}}"[代码][代码]></[代码][代码]image[代码][代码]>[代码][代码]<[代码][代码]canvas[代码] [代码]class[代码][代码]=[代码][代码]"chart_canvas"[代码] [代码]canvas-id[代码][代码]=[代码][代码]"chartCanvas"[代码] [代码]wx:if[代码][代码]=[代码][代码]"{{ !canvasImgSrc }}"[代码][代码]></[代码][代码]canvas[代码][代码]>[代码][代码]var[代码] [代码]ctx = wx.createCanvasContext([代码][代码]'chartCanvas'[代码][代码]);[代码][代码]         [代码][代码]this[代码][代码].chartHelper = [代码][代码]new[代码] [代码]ChartHelper(ctx, 690 * rpxToPx, 400 * rpxToPx, soupTimeData);[代码][代码]         [代码][代码]this[代码][代码].chartHelper.draw();[代码][代码]         [代码][代码]var[代码] [代码]_this = [代码][代码]this[代码][代码];[代码][代码]         [代码][代码]setTimeout(() => {[代码][代码]             [代码][代码]var[代码] [代码]callback = [代码][代码]function[代码][代码]() {[代码][代码]                 [代码][代码]return[代码] [代码]function[代码][代码](res) {[代码][代码]                     [代码][代码]console.log([代码][代码]'tempFile:'[代码][代码], res);[代码][代码]                     [代码][代码]var[代码] [代码]path = res.tempFilePath;[代码][代码]                     [代码][代码]var[代码] [代码]thirdStepData = _this.data.thirdStep;[代码][代码]                     [代码][代码]thirdStepData.contents[2].canvasImgSrc = path;[代码][代码]                     [代码][代码]_this.setData({ thirdStep: thirdStepData });[代码][代码]                 [代码][代码]}[代码][代码]             [代码][代码]}();[代码][代码]             [代码][代码]wx.canvasToTempFilePath({[代码][代码]                 [代码][代码]destWidth: 690 * rpxToPx * 2,[代码][代码]                 [代码][代码]destHeight: 400 * rpxToPx * 2,[代码][代码]                 [代码][代码]canvasId: [代码][代码]'chartCanvas'[代码][代码],[代码][代码]                 [代码][代码]success: callback[代码][代码]             [代码][代码]})[代码][代码]         [代码][代码]}, 50);[代码] [代码]class ChartHelper {[代码][代码]    [代码][代码]constructor(canvasCtx, width, height, data) {[代码][代码]        [代码][代码]this[代码][代码].canvasCtx = canvasCtx;[代码][代码]        [代码][代码]this[代码][代码].padding = 15;[代码][代码]        [代码][代码]this[代码][代码].margin = 15;[代码][代码]        [代码][代码]this[代码][代码].width = width - 2 * [代码][代码]this[代码][代码].padding - 2 * [代码][代码]this[代码][代码].margin;[代码][代码]        [代码][代码]this[代码][代码].height = height - 2 * [代码][代码]this[代码][代码].padding - 2 * [代码][代码]this[代码][代码].margin;[代码][代码]        [代码][代码]this[代码][代码].origX = [代码][代码]this[代码][代码].padding;[代码][代码]        [代码][代码]this[代码][代码].origY = height - [代码][代码]this[代码][代码].padding - [代码][代码]this[代码][代码].margin;[代码][代码]        [代码][代码]this[代码][代码].data = data;[代码][代码]        [代码][代码]this[代码][代码].maxYValue = [代码][代码]this[代码][代码].data[0].y;[代码][代码]        [代码][代码]this[代码][代码].data.forEach((item) => {[代码][代码]            [代码][代码]if[代码] [代码]([代码][代码]this[代码][代码].maxYValue < item.y) {[代码][代码]                [代码][代码]this[代码][代码].maxYValue = item.y;[代码][代码]            [代码][代码]}[代码][代码]        [代码][代码]})[代码][代码]    [代码][代码]}[代码] [代码]    [代码][代码]calcPoint() {[代码][代码]        [代码][代码]this[代码][代码].ptQty = [代码][代码]this[代码][代码].data.length;[代码][代码]        [代码][代码]var[代码] [代码]unitW = [代码][代码]this[代码][代码].width / ([代码][代码]this[代码][代码].ptQty - 1);[代码][代码]        [代码][代码]var[代码] [代码]unitH = [代码][代码]this[代码][代码].height / [代码][代码]this[代码][代码].maxYValue;[代码][代码]        [代码][代码]this[代码][代码].points = [];[代码][代码]        [代码][代码]for[代码] [代码](let i = 0; i < [代码][代码]this[代码][代码].ptQty; i++) {[代码][代码]            [代码][代码]let p = {};[代码][代码]            [代码][代码]p.x = [代码][代码]this[代码][代码].origX + [代码][代码]this[代码][代码].margin + i * unitW;[代码][代码]            [代码][代码]p.y = [代码][代码]this[代码][代码].origY - [代码][代码]this[代码][代码].data[i].y * unitH;[代码][代码]            [代码][代码]this[代码][代码].points.push(p);[代码][代码]        [代码][代码]}[代码][代码]    [代码][代码]}[代码] [代码]    [代码][代码]draw() {[代码][代码]        [代码][代码]this[代码][代码].calcPoint();[代码] [代码]        [代码][代码]// 填字[代码][代码]        [代码][代码]this[代码][代码].canvasCtx.setFontSize(13);[代码][代码]        [代码][代码]this[代码][代码].canvasCtx.setTextAlign([代码][代码]"center"[代码][代码]);[代码][代码]        [代码][代码]this[代码][代码].canvasCtx.setFillStyle([代码][代码]"#000000"[代码][代码]);[代码][代码]        [代码][代码]this[代码][代码].canvasCtx.setStrokeStyle([代码][代码]"black"[代码][代码]);[代码] [代码]        [代码][代码]for[代码] [代码](let i = 0; i < [代码][代码]this[代码][代码].ptQty; i++) {[代码][代码]            [代码][代码]this[代码][代码].canvasCtx.fillText([代码][代码]this[代码][代码].data[i].x + [代码][代码]'泡'[代码][代码], [代码][代码]this[代码][代码].points[i].x, [代码][代码]this[代码][代码].origY + [代码][代码]this[代码][代码].margin);[代码][代码]            [代码][代码]this[代码][代码].canvasCtx.fillText([代码][代码]this[代码][代码].data[i].y + [代码][代码]'秒'[代码][代码], [代码][代码]this[代码][代码].points[i].x, [代码][代码]this[代码][代码].points[i].y - [代码][代码]this[代码][代码].margin);[代码][代码]        [代码][代码]}[代码] [代码]        [代码][代码]this[代码][代码].canvasCtx.save();[代码] [代码]        [代码][代码]//画折线及与X轴之间的区域 [代码] 画Y向辅助线[代码][代码][代码]        [代码][代码]console.log([代码][代码]this[代码][代码].origX + [代码][代码]this[代码][代码].margin,[代码][代码]            [代码][代码]this[代码][代码].origY,[代码][代码]            [代码][代码]this[代码][代码].origX + [代码][代码]this[代码][代码].margin + [代码][代码]this[代码][代码].width,[代码][代码]            [代码][代码]this[代码][代码].origY);[代码][代码]        [代码][代码]var[代码] [代码]lingrad = [代码][代码]this[代码][代码].canvasCtx.createLinearGradient([代码][代码]            [代码][代码]this[代码][代码].origX + [代码][代码]this[代码][代码].margin,[代码][代码]            [代码][代码]this[代码][代码].origY,[代码][代码]            [代码][代码]this[代码][代码].origX + [代码][代码]this[代码][代码].margin + [代码][代码]this[代码][代码].width,[代码][代码]            [代码][代码]this[代码][代码].origY);[代码][代码]        [代码][代码]let LinearGradientArray = [代码][代码]this[代码][代码].rgbComputed([代码][代码]'#8bfff4'[代码][代码], [代码][代码]'#ffbc78'[代码][代码], +([代码][代码]this[代码][代码].ptQty - 2));[代码][代码]        [代码][代码]LinearGradientArray.unshift([代码][代码]'#8bfff4'[代码][代码]);[代码][代码]        [代码][代码]LinearGradientArray.push([代码][代码]'#ffbc78'[代码][代码]);[代码] [代码]        [代码][代码]for[代码] [代码](let i = 0; i < LinearGradientArray.length; i++) {[代码] [代码]            [代码][代码]if[代码] [代码](i != 0 && i != LinearGradientArray.length - 1) {[代码][代码]                [代码][代码]lingrad.addColorStop(i * (1 / (LinearGradientArray.length - 1)) - 3 / [代码][代码]this[代码][代码].width, LinearGradientArray[i]);[代码][代码]                [代码][代码]lingrad.addColorStop(i * (1 / (LinearGradientArray.length - 1)) - 3 / [代码][代码]this[代码][代码].width, [代码][代码]"#ffffff"[代码][代码]);[代码][代码]                [代码][代码]lingrad.addColorStop(i * (1 / (LinearGradientArray.length - 1)) + 3 / [代码][代码]this[代码][代码].width, [代码][代码]"#ffffff"[代码][代码]);[代码][代码]                [代码][代码]lingrad.addColorStop(i * (1 / (LinearGradientArray.length - 1)) + 3 / [代码][代码]this[代码][代码].width, LinearGradientArray[i]);[代码][代码]            [代码][代码]} [代码][代码]else[代码] [代码]{[代码][代码]                [代码][代码]lingrad.addColorStop(i * (1 / (LinearGradientArray.length - 1)), LinearGradientArray[i]);[代码][代码]            [代码][代码]};[代码][代码]        [代码][代码]}[代码] [代码]        [代码][代码]this[代码][代码].canvasCtx.setStrokeStyle(lingrad);[代码][代码]        [代码][代码]this[代码][代码].canvasCtx.setFillStyle(lingrad);[代码] [代码]        [代码][代码]this[代码][代码].canvasCtx.beginPath();[代码][代码]        [代码][代码]this[代码][代码].canvasCtx.moveTo([代码][代码]this[代码][代码].points[0].x, [代码][代码]this[代码][代码].points[0].y);[代码][代码]        [代码][代码]for[代码] [代码](let i = 1; i < [代码][代码]this[代码][代码].ptQty; i++) {[代码][代码]            [代码][代码]this[代码][代码].canvasCtx.lineTo([代码][代码]this[代码][代码].points[i].x, [代码][代码]this[代码][代码].points[i].y);[代码][代码]        [代码][代码]}[代码][代码]        [代码][代码]this[代码][代码].canvasCtx.lineTo([代码][代码]this[代码][代码].points[[代码][代码]this[代码][代码].ptQty - 1].x, [代码][代码]this[代码][代码].origY);[代码][代码]        [代码][代码]this[代码][代码].canvasCtx.lineTo([代码][代码]this[代码][代码].origX + [代码][代码]this[代码][代码].margin, [代码][代码]this[代码][代码].origY);[代码][代码]        [代码][代码]this[代码][代码].canvasCtx.closePath();[代码][代码]        [代码][代码]this[代码][代码].canvasCtx.fill();[代码] [代码]        [代码][代码]// 描边    [代码][代码]        [代码][代码]this[代码][代码].canvasCtx.setLineWidth(1);[代码][代码]        [代码][代码]this[代码][代码].canvasCtx.setStrokeStyle([代码][代码]'#444444'[代码][代码]);[代码] [代码]        [代码][代码]this[代码][代码].canvasCtx.beginPath();[代码][代码]        [代码][代码]this[代码][代码].canvasCtx.moveTo([代码][代码]this[代码][代码].points[0].x, [代码][代码]this[代码][代码].points[0].y);[代码][代码]        [代码][代码]for[代码] [代码](let i = 1; i < [代码][代码]this[代码][代码].ptQty; i++) {[代码][代码]            [代码][代码]this[代码][代码].canvasCtx.lineTo([代码][代码]this[代码][代码].points[i].x, [代码][代码]this[代码][代码].points[i].y);[代码][代码]        [代码][代码]}[代码][代码]        [代码][代码]this[代码][代码].canvasCtx.closePath();[代码][代码]        [代码][代码]this[代码][代码].canvasCtx.stroke();[代码][代码]    [代码][代码]        [代码][代码]// 画坐标点[代码][代码]        [代码][代码]var[代码] [代码]lingrad2 = [代码][代码]this[代码][代码].canvasCtx.createLinearGradient([代码][代码]            [代码][代码]this[代码][代码].origX,[代码][代码]            [代码][代码]this[代码][代码].origY,[代码][代码]            [代码][代码]this[代码][代码].origX + 2 * [代码][代码]this[代码][代码].margin + [代码][代码]this[代码][代码].width,[代码][代码]            [代码][代码]this[代码][代码].origY);[代码][代码]        [代码][代码]lingrad2.addColorStop(0, [代码][代码]'#19c5b5'[代码][代码]);[代码][代码]        [代码][代码]lingrad2.addColorStop(1, [代码][代码]'#ff8000'[代码][代码]);[代码][代码]        [代码][代码]// this.canvasCtx.setStrokeStyle(lingrad2);[代码][代码]        [代码][代码]this[代码][代码].canvasCtx.setFillStyle(lingrad2);[代码] [代码]        [代码][代码]for[代码] [代码](let i = 0; i < [代码][代码]this[代码][代码].ptQty; i++) {[代码][代码]            [代码][代码]this[代码][代码].canvasCtx.beginPath();[代码][代码]            [代码][代码]this[代码][代码].canvasCtx.arc([代码][代码]this[代码][代码].points[i].x, [代码][代码]this[代码][代码].points[i].y, 6, 0, 2 * Math.PI);[代码][代码]            [代码][代码]this[代码][代码].canvasCtx.fill();[代码][代码]        [代码][代码]}[代码] [代码]        [代码][代码]// 画X轴[代码][代码]        [代码][代码]this[代码][代码].canvasCtx.setLineWidth(1);[代码][代码]        [代码][代码]this[代码][代码].canvasCtx.setStrokeStyle([代码][代码]'black'[代码][代码]);[代码][代码]        [代码][代码]this[代码][代码].canvasCtx.beginPath();[代码][代码]        [代码][代码]this[代码][代码].canvasCtx.moveTo([代码][代码]this[代码][代码].origX, [代码][代码]this[代码][代码].origY);[代码][代码]        [代码][代码]this[代码][代码].canvasCtx.lineTo([代码][代码]this[代码][代码].origX + [代码][代码]this[代码][代码].width + 2 * [代码][代码]this[代码][代码].margin, [代码][代码]this[代码][代码].origY);[代码][代码]        [代码][代码]this[代码][代码].canvasCtx.closePath();[代码][代码]        [代码][代码]this[代码][代码].canvasCtx.stroke();[代码][代码]        [代码][代码]this[代码][代码].canvasCtx.restore();[代码][代码]        [代码][代码]this[代码][代码].canvasCtx.draw();[代码][代码]    [代码][代码]}[代码][代码]    [代码][代码]rgbComputed(startColor, endColor, step) {[代码] [代码]        [代码][代码]let startRGB = [代码][代码]this[代码][代码].colorRgb(startColor); [代码][代码]//转换为rgb数组模式[代码][代码]        [代码][代码]let startR = startRGB[0];[代码][代码]        [代码][代码]let startG = startRGB[1];[代码][代码]        [代码][代码]let startB = startRGB[2];[代码] [代码]        [代码][代码]let endRGB = [代码][代码]this[代码][代码].colorRgb(endColor);[代码][代码]        [代码][代码]let endR = endRGB[0];[代码][代码]        [代码][代码]let endG = endRGB[1];[代码][代码]        [代码][代码]let endB = endRGB[2];[代码] [代码]        [代码][代码]let sR = (endR - startR) / step; [代码][代码]//总差值[代码][代码]        [代码][代码]let sG = (endG - startG) / step;[代码][代码]        [代码][代码]let sB = (endB - startB) / step;[代码] [代码]        [代码][代码]var[代码] [代码]colorArr = [];[代码][代码]        [代码][代码]for[代码] [代码]([代码][代码]var[代码] [代码]i = 0; i < step; i++) {[代码][代码]            [代码][代码]//计算每一步的hex值[代码][代码]            [代码][代码]var[代码] [代码]hex = [代码][代码]this[代码][代码].colorHex([代码][代码]'rgb('[代码] [代码]+ parseInt((sR * i + startR)) + [代码][代码]','[代码] [代码]+ parseInt((sG * i + startG)) + [代码][代码]','[代码] [代码]+ parseInt((sB * i + startB)) + [代码][代码]')'[代码][代码]);[代码][代码]            [代码][代码]colorArr.push(hex);[代码][代码]        [代码][代码]}[代码][代码]        [代码][代码]return[代码] [代码]colorArr;[代码][代码]    [代码][代码]}[代码][代码]    [代码][代码]colorRgb(sColor) {[代码][代码]        [代码][代码]var[代码] [代码]reg = /^[代码][代码]#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;[代码][代码]        [代码][代码]var[代码] [代码]sColor = sColor.toLowerCase();[代码][代码]        [代码][代码]if[代码] [代码](sColor && reg.test(sColor)) {[代码][代码]            [代码][代码]if[代码] [代码](sColor.length === 4) {[代码][代码]                [代码][代码]var[代码] [代码]sColorNew = [代码][代码]"#"[代码][代码];[代码][代码]                [代码][代码]for[代码] [代码]([代码][代码]var[代码] [代码]i = 1; i < 4; i += 1) {[代码][代码]                    [代码][代码]sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));[代码][代码]                [代码][代码]}[代码][代码]                [代码][代码]sColor = sColorNew;[代码][代码]            [代码][代码]}[代码][代码]            [代码][代码]//处理六位的颜色值[代码][代码]            [代码][代码]var[代码] [代码]sColorChange = [];[代码][代码]            [代码][代码]for[代码] [代码]([代码][代码]var[代码] [代码]i = 1; i < 7; i += 2) {[代码][代码]                [代码][代码]sColorChange.push(parseInt([代码][代码]"0x"[代码] [代码]+ sColor.slice(i, i + 2)));[代码][代码]            [代码][代码]}[代码][代码]            [代码][代码]return[代码] [代码]sColorChange;[代码][代码]        [代码][代码]} [代码][代码]else[代码] [代码]{[代码][代码]            [代码][代码]return[代码] [代码]sColor;[代码][代码]        [代码][代码]}[代码][代码]    [代码][代码]}[代码][代码]    [代码][代码]colorHex(rgb) {[代码][代码]        [代码][代码]var[代码] [代码]_this = rgb;[代码][代码]        [代码][代码]var[代码] [代码]reg = /^[代码][代码]#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;[代码][代码]        [代码][代码]if[代码] [代码](/^(rgb|RGB)/.test(_this)) {[代码][代码]            [代码][代码]var[代码] [代码]aColor = _this.replace(/(?:(|)|rgb|RGB)*/g, [代码][代码]""[代码][代码]).split([代码][代码]","[代码][代码]);[代码][代码]            [代码][代码]var[代码] [代码]strHex = [代码][代码]"#"[代码][代码];[代码][代码]            [代码][代码]for[代码] [代码]([代码][代码]var[代码] [代码]i = 0; i < aColor.length; i++) {[代码][代码]                [代码][代码]var[代码] [代码]hex = Number(aColor[i]).toString(16);[代码][代码]                [代码][代码]hex = hex < 10 ? 0 + [代码][代码]''[代码] [代码]+ hex : hex; [代码][代码]// 保证每个rgb的值为2位[代码][代码]                [代码][代码]if[代码] [代码](hex === [代码][代码]"0"[代码][代码]) {[代码][代码]                    [代码][代码]hex += hex;[代码][代码]                [代码][代码]}[代码][代码]                [代码][代码]strHex += hex;[代码][代码]            [代码][代码]}[代码][代码]            [代码][代码]if[代码] [代码](strHex.length !== 7) {[代码][代码]                [代码][代码]strHex = _this;[代码][代码]            [代码][代码]}[代码][代码]            [代码][代码]return[代码] [代码]strHex;[代码][代码]        [代码][代码]} [代码][代码]else[代码] [代码]if[代码] [代码](reg.test(_this)) {[代码][代码]            [代码][代码]var[代码] [代码]aNum = _this.replace(/[代码][代码]#/, "").split("");[代码][代码]            [代码][代码]if[代码] [代码](aNum.length === 6) {[代码][代码]                [代码][代码]return[代码] [代码]_this;[代码][代码]            [代码][代码]} [代码][代码]else[代码] [代码]if[代码] [代码](aNum.length === 3) {[代码][代码]                [代码][代码]var[代码] [代码]numHex = [代码][代码]"#"[代码][代码];[代码][代码]                [代码][代码]for[代码] [代码]([代码][代码]var[代码] [代码]i = 0; i < aNum.length; i += 1) {[代码][代码]                    [代码][代码]numHex += (aNum[i] + aNum[i]);[代码][代码]                [代码][代码]}[代码][代码]                [代码][代码]return[代码] [代码]numHex;[代码][代码]            [代码][代码]}[代码][代码]        [代码][代码]} [代码][代码]else[代码] [代码]{[代码][代码]            [代码][代码]return[代码] [代码]_this;[代码][代码]        [代码][代码]}[代码][代码]    [代码][代码]};[代码][代码]}[代码] [代码]module.exports = ChartHelper[代码]看到微信小程序7月12日的更新，微信小程序一直在努力。希望尽快能修改这个。

[图片] 啧啧，编辑这个文档的童鞋这个月是不是要扣工资了。腾讯主推产品官方文档出现错别字，啧啧。会不会明天上头条。