700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 微信小程序使用canvas绘制圆角矩形在Android:变形 锯齿

微信小程序使用canvas绘制圆角矩形在Android:变形 锯齿

时间:2019-11-10 11:57:59

相关推荐

微信小程序使用canvas绘制圆角矩形在Android:变形 锯齿

这两天用小程序实现分享生成海报,那我的手机测的一直没问题,结果后来用同事的小米测发现:画的图形缺个角,锯齿形的,根据小程序社区回复:使用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();},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。