美文网首页
微信小程序 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