小程序 canvas 绘制圆角矩形

Love The Way You Lie 2024-04-17 05:28 48阅读 0赞

/**
     * 绘制圆角矩形
     * @param {Object} ctx - canvas组件的绘图上下文
     * @param {Number} x - 矩形的x坐标
     * @param {Number} y - 矩形的y坐标
     * @param {Number} w - 矩形的宽度
     * @param {Number} h - 矩形的高度
     * @param {Number} r - 矩形的圆角半径
     * @param {String} [c = 'transparent'] - 矩形的填充色
     */
    roundRect(ctx, x, y, w, h, r, c = '#fff') {
        if (w < 2 * r) { r = w / 2; }
        if (h < 2 * r) { r = h / 2; }
    
        ctx.beginPath();
        ctx.fillStyle = c;
    
        ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
        ctx.moveTo(x + r, y);
        ctx.lineTo(x + w - r, y);
        ctx.lineTo(x + w, y + r);
    
        ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
        ctx.lineTo(x + w, y + h - r);
        ctx.lineTo(x + w - r, y + h);
    
        ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
        ctx.lineTo(x + r, y + h);
        ctx.lineTo(x, y + h - r);
    
        ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
        ctx.lineTo(x, y + r);
        ctx.lineTo(x + r, y);
    
        ctx.fill();
        ctx.closePath();
    },

**效果如图：**

![20190822114915872.png][]

[20190822114915872.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/10e143163051488d947b03a2ff25ce40.png

发表评论取消回复

表情：

评论列表（有 0 条评论，48人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序 canvas 绘制圆角矩形

/** * 绘制圆角矩形 * @param {Object} ctx - canvas组件的绘图上下文 * @param {Numbe...

Love The Way You Lie/ 2024年04月17日 05:28/ 0 赞/ 49 阅读

相关 canvas图形绘制：矩形，路径

1，canvas绘制矩形：实心矩形，边框矩形，擦除矩形 <!DOCTYPE html> <html lang="en"> <head>

布满荆棘的人生/ 2022年11月14日 15:58/ 0 赞/ 248 阅读

相关 canvas 圆角矩形填充_canvas-绘制矩形及弧形

矩形是唯一一种可以直接在 2D 上下文中绘制的形状。与矩形有关的方法包括 fillRect() 、strokeRect() 和 clearRect() 这三个方法都能接收 4

谁借莪１个温暖的怀抱￠/ 2022年11月06日 01:57/ 0 赞/ 455 阅读

相关 Canvas学习：绘制矩形

[通过前面教程][Link 1]的学习，我们可以在Canvas中轻易[绘制路径（线段）][Link 1]。这仅仅是Canvas中的一小部分，今天我们来看看在Canvas中怎么绘

柔情只为你懂/ 2022年09月30日 04:59/ 0 赞/ 1401 阅读

相关 canvas应用——圆角矩形图片

前段时间写了一个[canvas应用——将方形图片处理为圆形][canvas] ，最近就想把这个完善一下，所以就再补充一个canvas的圆角矩形处理方式。例子你可以直

本是古典何须时尚/ 2022年05月23日 07:37/ 0 赞/ 244 阅读

相关微信小程序实现圆角矩形按钮

> 在微信小程序的开发当中，为了界面的美观，我们通常需要修改原始按钮的css样式，下面教大家如何将按钮改成圆角矩形首先将按钮原始边框关闭，然后设置按钮的的弧度，css如下：

快来打我*/ 2022年05月15日 10:44/ 0 赞/ 1563 阅读

相关 canvas绘制圆角头像

如果你想绘制的网页包含一个圆弧形的头像的canvas图片，但是头像本身是正方形的，需要的方法如下：首先，拿到头像在画布上的坐标和宽高：(具体怎么获取不在此做具体介绍)

不念不忘少年蓝@/ 2022年03月25日 03:00/ 0 赞/ 254 阅读

相关 h5 Canvas矩形的绘制

h5 Canvas矩形的绘制 1.绘制矩形api 在Canvas中提供了绘制矩形的API： fillRect(x, y, width, height)：绘制一

淩亂°似流年/ 2022年03月16日 03:46/ 0 赞/ 408 阅读

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

目录分析完整代码如下 > 前言 > 在react项目中需要用到绘制矩形填充, 因为直角矩形不够美观, 需要绘制圆角填充矩形分析 Canva

落日映苍穹つ/ 2021年09月21日 14:22/ 0 赞/ 957 阅读

相关 canvas绘制矩形

canvas提供了三个API，分别是： 1.绘制一个填充的矩形 fillRect(x, y, width, height) 2.绘制一个矩形的边框

旧城等待，/ 2021年07月24日 21:51/ 0 赞/ 445 阅读