JavaScript 使用canvas绘制圆角矩形边框

落日映苍穹つ 2021-09-21 14:22 1139阅读 0赞

### 目录 ###

*  分析
 *  完整代码如下

> 前言  
> 在react项目中需要用到绘制矩形填充, 因为直角矩形不够美观, 需要绘制圆角填充矩形

# 分析 #

Canvas并没有提供绘制圆角矩形的方法,但是通过观察,我们可以发现,其实我们可以将圆角矩形分为四段,可以通过使用arcTo来实现。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70]

我们假设起点为x,y.绘制的矩形宽高为w,h.圆角的半径为r;所以将起点设置在(x+r,y)处，然后acrTo(x+w,y,x+w,y+h,r),对于终点,其实只要y值大于绿色点的都是可以的(这部分在绘制曲线部分已经详述)。此处我们将终点设为(x+w,y+h);这就是第一段曲线。第一段曲线绘制完毕之后，画笔落在了下图绿色点的位置。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 1]

现在再看下第二段曲线:  
因此我们直接使用arcTo(x+w,y+h,x,y+h,r)绘制出第二个圆角,第二个曲线绘制完毕后,画笔落在了绿色点位置。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 2]

我们可以使用同样的方法来绘制第三个圆角。acrTo(x,y+h,x,y,r)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 3]

第四个圆角arcTo(x,y,x+w,y)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 4]

这样,一个圆角矩形就完成了。为了方便使用,我们可以将绘制圆角矩形的方法封装在一个函数,或者加入到CanvasRenderingContext2D的原型中。  
x,y是矩形的起点;w,h是矩形的宽高;r是圆角矩形的半径

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;
    }

这里使用了return this,这样我们就可以像使用jquery一样,使用链式语法。

# 完整代码如下 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <canvas id = "palette" width="400px" height="400px">
            您的浏览器不支持Canvas标签，请升级或更换浏览器
        </canvas>
        <script> var palette = document.querySelector("#palette").getContext("2d"); palette.moveTo(0,0); palette.lineTo(0,300); palette.moveTo(50.5,0); palette.lineTo(50.5,300); palette.moveTo(100.5,0); palette.lineTo(100.5,300); palette.moveTo(150.5,0); palette.lineTo(150.5,300); palette.moveTo(200.5,0); palette.lineTo(200.5,300); palette.moveTo(250.5,0); palette.lineTo(250.5,300); palette.moveTo(300.5,0); palette.lineTo(300.5,300); palette.moveTo(0,0); palette.lineTo(300,0); palette.moveTo(0,50.5); palette.lineTo(300,50.5); palette.moveTo(0,100.5); palette.lineTo(300,100.5); palette.moveTo(0,150.5); palette.lineTo(300,150.5); palette.moveTo(0,200.5); palette.lineTo(300,200.5); palette.moveTo(0,250.5); palette.lineTo(300,250.5); palette.moveTo(0,300.5); palette.lineTo(300,300.5); palette.stroke(); 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; } palette.lineWidth = 5; palette.strokeStyle = "#F00"; palette.roundRect(50,50,200,150,30).stroke(); // 绘制填充 palette.fillStyle = "rgba(255, 192, 203, 0.5)"; palette.fill(); </script>
    </body>
    </html>

![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 5]

--------------------

内容来源：https://blog.csdn.net/shi851051279/article/details/80436851

原文来源：https://blog.csdn.net/shi851051279/article/details/80436851

原作者：泥猴桃

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70]: /images/20210920/96459f3bc51641038d0250c3a4f71b80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 1]: /images/20210920/117482f409234e4ab062d9adb8a2e513.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 2]: /images/20210920/7089a3bcc6c14c5faf75dca2e09011ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 3]: /images/20210920/cc1e34f1bc834675a1fe76da3d60269a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 4]: /images/20210920/2d8558a550cc4197a6c798b00a8553b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70 5]: /images/20210920/b215c12ce36b49559df704d56beaf44a.png