收藏
回答

canvas渐变色在安卓手机上模糊

问题模块
API和组件

使用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日的更新,微信小程序一直在努力。希望尽快能修改这个。

最后一次编辑于  2017-07-14  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答