diff --git a/pages/canvas/index.js b/pages/canvas/index.js index 9f5c962..d3b76ab 100644 --- a/pages/canvas/index.js +++ b/pages/canvas/index.js @@ -140,7 +140,7 @@ Page({ ctx.setFillStyle("#fbfbfb"); ctx.fillRect(0, 0, that.data.windowWidth, that.data.windowHeight); ctx.drawImage(res.path, 0, 50, topImageWidth, topImageHeight); - that.roundRect(ctx, 15 * scale, 270 * scale, 325 * scale, 125 * scale, 10); + that.roundRect(ctx, 15 * scale, 270 * scale, 325 * scale, 125 * scale, 10* scale); that.drawOtherContent(ctx, scale, options); that.drawAvatarimg(ctx, scale); that.drawqrCode(ctx, scale); @@ -314,26 +314,32 @@ Page({ ctx.draw(true); }, //绘制圆角矩形 - roundRect: function(ctx, x, y, w, h, r) { - ctx.save(); - if (w < 2 * r) { - r = w / 2; - } - if (h < 2 * r) { - r = h / 2; - } - ctx.beginPath(); - // ctx.setStrokeStyle('white'); - ctx.setFillStyle('#fff') - ctx.setLineWidth(4); - ctx.moveTo(x + r, y); - ctx.arcTo(x + w, y, x + w, y + h, r); - ctx.arcTo(x + w, y + h, x, y + h, r); - ctx.arcTo(x, y + h, x, y, r); - ctx.arcTo(x, y, x + w, y, r); - ctx.fill(); - ctx.closePath(); - ctx.draw(true); + 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(); }, //获取商户优惠劵信息 getCouponList: function(id) {