最新更新时间：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();

• 绘制一个正方形路径

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

• 绘制一个填充矩形

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

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

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

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

圆角

• 绘制一个圆角矩形

画布原点坐标(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();

• 绘制一个填充圆角矩形

画布原点坐标(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();

渐变

• 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);

• 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);

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

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

• 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();

参考资料

• CanvasRenderingContext2D - Web API 接口参考 | MDN

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

打赏我吧^-^