小程序
小游戏
企业微信
微信支付
扫描小程序码分享
此方法绘制圆角在ios系统上是正常的，在安卓下点的位置会偏移。
6 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
你好，我这里有一份canvas画圆角的代码，在android上是ok的，请参考
roundRect1: function (x, y, w, h, r) {
// 开始绘制
const ctx = this .ctx
ctx.beginPath();
this .ctx.setFillStyle( '#ffffff' );
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);
this .ctx.fill();
this .ctx.setGlobalAlpha( 0.04 );
this .ctx.setShadow( 0 , 2 , 4 , '#000000' )
ctx.closePath();
this .ctx.draw( true )
return this ;
}
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
我用你的代码画了，然后想用createPattern结果失败了，不知道是啥问题，这里的avatarUrl是getUserInfo拿回来的头像
this
.wxapi.downloadFile({url: avatarUrl})
.then(({tempFilePath})=>{
console.log(tempFilePath);
let p = ctx.createPattern(tempFilePath,
'no-repeat'
);
roundRect(ctx, 20, rpx2px(
.$hei + 50), rpx2px(100), rpx2px(100), rpx2px(8));
ctx.fillStyle = p;
ctx.fill();
ctx.draw(
true
});
有用到createPattern吗？ 为啥我的createPattern无效呢？@小样贼拽
好的，谢谢
实在不好意思，让你久等了，我们尽快处理
wechatide://minicode/GrMsOxm86xYs
麻烦给个相关的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html），我们定位下问题
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
你好，我这里有一份canvas画圆角的代码，在android上是ok的，请参考
roundRect1: function (x, y, w, h, r) {
// 开始绘制
const ctx = this .ctx
ctx.beginPath();
this .ctx.setFillStyle( '#ffffff' );
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);
this .ctx.fill();
this .ctx.setGlobalAlpha( 0.04 );
this .ctx.setShadow( 0 , 2 , 4 , '#000000' )
ctx.closePath();
this .ctx.draw( true )
return this ;
}
我用你的代码画了，然后想用createPattern结果失败了，不知道是啥问题，这里的avatarUrl是getUserInfo拿回来的头像
this.wxapi.downloadFile({url: avatarUrl}).then(({tempFilePath})=>{console.log(tempFilePath);let p = ctx.createPattern(tempFilePath,'no-repeat');roundRect(ctx, 20, rpx2px(this.$hei + 50), rpx2px(100), rpx2px(100), rpx2px(8));ctx.fillStyle = p;ctx.fill();ctx.draw(true);});有用到createPattern吗？ 为啥我的createPattern无效呢？@小样贼拽
好的，谢谢
实在不好意思，让你久等了，我们尽快处理
wechatide://minicode/GrMsOxm86xYs
麻烦给个相关的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html），我们定位下问题