美文网首页
微信小程序 Canvas圆角矩形虚线、实线框

微信小程序 Canvas圆角矩形虚线、实线框

作者: 单抽律化娜 | 来源:发表于2019-11-27 17:59 被阅读0次

/// 圆角矩形路径 
roundRectPath: function(ctx, x, y, w, h, r) {
    ctx.beginPath();
    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.closePath(); 
}

/// 绘制圆角矩形线条
var ctx = wx.createCanvasContext('canvas');
ctx.setStrokeStyle('green');
this.roundRectPath(ctx, 0, 0, 300, 200, 50);
ctx.stroke();

/// 绘制圆角矩形虚线
var ctx = wx.createCanvasContext('canvas');
ctx.setStrokeStyle('green');
ctx.setLineDash([3, 3]);
ctx.setLineJoin('round');
this.roundRectPath(ctx, 0, 0, 300, 200, 50);
ctx.stroke();
    

相关文章

网友评论

      本文标题:微信小程序 Canvas圆角矩形虚线、实线框

      本文链接:https://www.haomeiwen.com/subject/jccmwctx.html