随笔- 60 文章- 0 评论- 15 阅读- 14万

canvas绘制圆角矩形

Canvas并没有提供绘制圆角矩形的方法,但是通过观察,我们可以发现,其实我们可以将圆角矩形分为四段,可以通过使用arcTo来实现

我们假设起点为x,y.绘制的矩形宽高为w,h.圆角的半径为r;所以将起点设置在(x+r,y)处，然后acrTo(x+w,y,x+w,y+h,r)其它线段以此类推

canvasId是canvas的id,x,y是矩形的起点;w,h是矩形的宽高;r是圆角矩形的半径.

<body>
    <canvas id = "palette" width="300px" height="200px">
        您的浏览器不支持Canvas标签，请升级或更换浏览器
    </canvas>
</body>
</html>
<script>
    var roundRectangle = document.querySelector("#palette").getContext("2d");
    CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
        if (w < 2 * r) r = w / 2;
        if (h < 2 * r) r = h / 2;
        this.beginPath();
        this.moveTo(x+r, y);
        this.arcTo(x+w, y, x+w, y+h, r);
        this.arcTo(x+w, y+h, x, y+h, r);
        this.arcTo(x, y+h, x, y, r);
        this.arcTo(x, y, x+w, y, r);
        this.closePath();
        return this;
    }
    roundRectangle.lineWidth = 4;
    roundRectangle.strokeStyle = "#0000ff";
    roundRectangle.roundRect(40,40,200,120,30).stroke();
</script>