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


/// 圆角矩形路径 
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圆角矩形虚线、实线框)