美文网首页
canvas画圆角矩形

canvas画圆角矩形

作者: yuanlu954 | 来源:发表于2019-03-10 11:11 被阅读0次

    创建一个画圆角矩形的函数

        // 画圆角矩形
        function roundedRect(ctx, x, y, width, height, radius) {
            ctx.strokeStyle = "#fffbff";
            ctx.beginPath();
            ctx.moveTo(x, y + radius);
            ctx.lineTo(x, y + height - radius);
            ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
            ctx.lineTo(x + width - radius, y + height);
            ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
            ctx.lineTo(x + width, y + radius);
            ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
            ctx.lineTo(x + radius, y);
            ctx.quadraticCurveTo(x, y, x, y + radius);
            ctx.stroke();
        }
    
    

    相关文章

      网友评论

          本文标题:canvas画圆角矩形

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