Canvas学习记录之rect

电玩女神 2023-07-14 10:36 27阅读 0赞

###### *最新更新时间：2020年03月14日14:29:22* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

> 本文内容：本文介绍基于`rect()绘制矩形路径`的一些基本用法，矩形、正方形、圆角矩形、线性渐变矩形、辐射渐变圆形

#### rect ####

>  *  绘制一个矩形，四个入参依次为：起始点x轴坐标 `(起始点为矩形左上角定点)`、起始点y轴坐标、宽度、高度
>  *  canvas画布的`原点坐标(0,0)`为左上角

ctx.rect(x, y, width, height);

*  绘制一个矩形路径

ctx.rect(10, 10, 100, 50);
    ctx.lineWidth =1;
    ctx.strokeStyle = '#000';
    ctx.stroke();

![在这里插入图片描述][20200314114958420.png]

*  绘制一个正方形路径

ctx.rect(10, 10, 100, 100);
    ctx.lineWidth =1;
    ctx.strokeStyle = '#000';
    ctx.stroke();

![在这里插入图片描述][20200314115010993.png]

*  绘制一个填充矩形

ctx.rect(10, 10, 100, 50);
    ctx.fillStyle = '#7FFFAA';
    ctx.fill();

![在这里插入图片描述][20200314115143326.png]

*  clearRect(x, y, width, height);

>  *  以矩形擦除画布之前绘制的所有内容，像素变成透明
>  *  四个入参依次为：矩形起点的 x 轴坐标、矩形起点的 y 轴坐标、矩形的宽度、矩形的高度。

ctx.fillStyle = '#7FFFAA';
    ctx.fillRect(10, 10, 100, 50);
    ctx.clearRect(0,0,60,35);

![在这里插入图片描述][2020031414263614.png]

#### 圆角 ####

*  绘制一个圆角矩形

> 画布原点坐标(0,0)，矩形左上角坐标(10,10)，宽100，高50，圆角半径5

//矩形起始坐标(10,10)
    let x =10;
    let y = 10;
    //圆角半径5
    let r = 5;
    //矩形宽高
    let w = 100;
    let h = 50;
    //开始新路径
    ctx.beginPath();
    //左上角圆角
    ctx.arc(x+r,y+r,r,Math.PI,Math.PI*3/2);
    //矩形上边线
    ctx.lineTo(x+w-r, y);
    //右上角圆角
    ctx.arc(x+w-r,y+r,r,Math.PI*3/2,Math.PI*2);
    //矩形右边线
    ctx.lineTo(x+w, y+h-r);
    //右下角圆角
    ctx.arc(x+w-r,y+h-r,r,0,Math.PI/2);
    //矩形下边线
    ctx.lineTo(x+r, y+h);
    //左下角圆角
    ctx.arc(x+r,y+h-r,r,Math.PI/2,Math.PI);
    //矩形左边线
    ctx.lineTo(x, y+r);//最后一条边线可用 ctx.closePath() 完成绘制
    //线宽
    ctx.lineWidth = 1;
    //线条色值
    ctx.strokeStyle = '#000';
    //画线
    ctx.stroke();

![在这里插入图片描述][20200314134538639.png]

*  绘制一个填充圆角矩形

> 画布原点坐标(0,0)，矩形左上角坐标(10,10)，宽100，高50，圆角半径5

//矩形起始坐标(10,10)
    let x =10;
    let y = 10;
    //圆角半径5
    let r = 5;
    //矩形宽高
    let w = 100;
    let h = 50;
    //开始新路径
    ctx.beginPath();
    //左上角圆角
    ctx.arc(x+r,y+r,r,Math.PI,Math.PI*3/2);
    //矩形上边线
    ctx.lineTo(x+w-r, y);
    //右上角圆角
    ctx.arc(x+w-r,y+r,r,Math.PI*3/2,Math.PI*2);
    //矩形右边线
    ctx.lineTo(x+w, y+h-r);
    //右下角圆角
    ctx.arc(x+w-r,y+h-r,r,0,Math.PI/2);
    //矩形下边线
    ctx.lineTo(x+r, y+h);
    //左下角圆角
    ctx.arc(x+r,y+h-r,r,Math.PI/2,Math.PI);
    //矩形左边线
    ctx.lineTo(x, y+r);//最后一条边线可用 ctx.closePath() 完成绘制
    //填充色
    ctx.fillStyle = '#7FFFAA';
    //填充
    ctx.fill();

![在这里插入图片描述][20200314134839368.png]

#### 渐变 ####

*  createLinearGradient(x0, y0, x1, y1)

>  *  线性渐变，方法创建一个沿参数坐标指定的直线的渐变。该方法返回一个线性 CanvasGradient对象
>  *  四个入参依次为：起点 x 轴坐标、起点 y 轴坐标、终点的 x 轴坐标、终点的 y 轴坐标

*  x轴方向水平方向渐变填充矩形

var gradient = ctx.createLinearGradient(0,0,100,0);
    gradient.addColorStop(0,"#000");
    gradient.addColorStop(1,"#ff77ff");
    ctx.fillStyle = gradient;
    ctx.fillRect(10,10,100,50);

![在这里插入图片描述][20200314135935525.png]

*  y轴方向垂直方向渐变填充矩形

var gradient = ctx.createLinearGradient(0,0,0,50);
    gradient.addColorStop(0,"#000");
    gradient.addColorStop(1,"#ff77ff");
    ctx.fillStyle = gradient;
    ctx.fillRect(10,10,100,50);

![在这里插入图片描述][2020031414005160.png]

*  对角线方向(左上角到右下角)渐变填充矩形

var gradient = ctx.createLinearGradient(0,0,100,100);
    gradient.addColorStop(0,"#000");
    gradient.addColorStop(1,"#ff77ff");
    ctx.fillStyle = gradient;
    ctx.fillRect(10,10,100,100);

![在这里插入图片描述][20200314140228787.png]

*  createRadialGradient(x0, y0, r0, x1, y1, r1)

>  *  放射性渐变，根据参数确定两个圆的坐标，绘制放射性渐变的方法
>  *  六个入参依次为：开始圆形的 x 轴坐标、开始圆形的 y 轴坐标、开始圆形的半径、结束圆形的 x 轴坐标、结束圆形的 y 轴坐标、结束圆形的半径。

*  三色辐射渐变填充圆形

var gradient = ctx.createRadialGradient(50,50,50,50,50,0);
    gradient.addColorStop(0,"#000");
    gradient.addColorStop(0.5,"#7FFFAA");
    gradient.addColorStop(1,"#ff77ff");
    ctx.fillStyle = gradient;
    ctx.arc(50,50,50,0,Math.PI*2);
    ctx.fill();

![在这里插入图片描述][20200314141148936.png]

#### 参考资料 ####

*  [CanvasRenderingContext2D - Web API 接口参考 | MDN][CanvasRenderingContext2D - Web API _ _ MDN]

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[20200314114958420.png]: /images/20230529/3291f442fa9646f19dbc4f28e8046167.png
[20200314115010993.png]: /images/20230529/c314f2b9e82143eba5f7a6b8bbe922df.png
[20200314115143326.png]: /images/20230529/dbe7428bba214385b54d33a71b0aaadb.png
[2020031414263614.png]: /images/20230529/e6395244151a46339bf2524567a37963.png
[20200314134538639.png]: /images/20230529/12473f1946c0442cb2cf71ddfac894fd.png
[20200314134839368.png]: /images/20230529/31b005be886942ba8b946eb359b253f2.png
[20200314135935525.png]: /images/20230529/1f90b95c3137492a85371a09704ec67e.png
[2020031414005160.png]: /images/20230529/edeb4c9fb38041f6a14e9ee084378170.png
[20200314140228787.png]: /images/20230529/3f7933317d5c4789ad5f7361992e58e1.png
[20200314141148936.png]: /images/20230529/f5b29472e9d14e588faf98cacae7957e.png
[CanvasRenderingContext2D - Web API _ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460