掌握新技巧！Canvas 绘制圆角矩形，轻松搞定

前端

2023-04-10 11:06:29

用 Canvas 绘制圆角矩形：释放创意，提升用户体验

引言

在前端开发和网页设计领域，Canvas API 凭借其绘制复杂图形和动画的能力，备受青睐。然而，绘制圆角矩形这一看似简单的任务，却曾让开发者头疼不已。传统方法复杂繁琐，需要组合多条直线和圆弧，代码冗长且易出错。

告别繁琐，Canvas 新特性为您赋能

Canvas API 的不断发展带来了一项革新性的特性——roundRect() 方法。这个方法可以轻松绘制圆角矩形，彻底改变了传统的绘制方式。只需一行代码，开发者即可创建出美观的圆角矩形，告别繁琐的组合方式。

绘制圆角矩形：简单易懂的步骤

绘制 Canvas 圆角矩形只需以下几个步骤：

创建 Canvas 元素： 在 HTML 文档中创建 Canvas 元素，指定其宽高。
获取 Canvas 上下文： 使用 getContext() 方法获取 Canvas 的绘图上下文，以便执行后续操作。
设置填充和描边样式： 通过 fillStyle 和 strokeStyle 属性设置填充颜色和描边颜色。
绘制圆角矩形： 调用 roundRect() 方法绘制圆角矩形。该方法接受 6 个参数：矩形左上角 x 坐标、矩形左上角 y 坐标、矩形宽度、矩形高度、圆角半径、是否填充矩形（可选）。
完成绘制： 使用 fill() 和 stroke() 方法分别填充和描边矩形，完成绘制。

代码示例：实践出真知

以下代码示例演示了如何使用 Canvas API 绘制一个圆角矩形：

<canvas id="canvas" width="500" height="300"></canvas>

// 获取 Canvas 上下文
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 设置填充和描边样式
ctx.fillStyle = "#FF0000";
ctx.strokeStyle = "#000000";

// 绘制圆角矩形
ctx.roundRect(50, 50, 100, 100, 10, true);

// 完成绘制
ctx.fill();
ctx.stroke();