Question

回答

置顶canvas渐变色在安卓手机上模糊精选热门

2017-07-141041浏览问题模块： Bug反馈

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

置顶canvas渐变色在安卓手机上模糊精选热门

请选择投诉理由

删除当前帖子

删除后帖子内容及评论将一并被删除，且不可恢复。

关注“微信开放社区”公众号

反馈

新增或编辑超链接

插入视频

关注“微信开放社区”公众号