這兩天用小程序實現分享生成海報,那我的手機測的一直沒問題,結果後來用同事的小米測發現:畫的圖形缺個角,鋸齒形的,根據小程序社區回覆:使用ctx.arc + ctx.lineTo就能避免Android錯誤,Android只使用ctx.arcTo不兼容!!!
/**
* 繪製圓角矩形
* @param {Object} ctx - canvas組件的繪圖上下文
* @param {Number} x - 矩形的x座標
* @param {Number} y - 矩形的y座標
* @param {Number} w - 矩形的寬度
* @param {Number} h - 矩形的高度
* @param {Number} r - 矩形的圓角半徑
* @param {String} [c = 'transparent'] - 矩形的填充色
*/
roundRect: function(ctx, x, y, w, h, r, c = '#fff') {
if (w < 2 * r) { r = w / 2; }
if (h < 2 * r) { r = h / 2; }
ctx.beginPath();
ctx.fillStyle = c;
ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
ctx.moveTo(x + r, y);
ctx.lineTo(x + w - r, y);
ctx.lineTo(x + w, y + r);
ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
ctx.lineTo(x + w, y + h - r);
ctx.lineTo(x + w - r, y + h);
ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
ctx.lineTo(x + r, y + h);
ctx.lineTo(x, y + h - r);
ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
ctx.lineTo(x, y + r);
ctx.lineTo(x + r, y);
ctx.fill();
ctx.closePath();
},