js canvas实现圆角图片

让我来为您讲解一下如何用JS Canvas实现圆角图片。

准备工作

在使用JS Canvas实现圆角图片之前，我们需要准备以下工作：

引入JS文件

我们需要在HTML文件中引入canvas.js文件，以便使用其中的方法和属性。可以使用以下代码进行引入：

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti"></script>

获取图片

我们需要获取原始图片，可以在HTML文件中使用<img>标签进行获取。例如：

<img id="oriImg" src="https://example.com/image.jpg" />

实现步骤

一般来说，实现圆角图片的步骤可以分为以下几步：

将原始图片绘制到Canvas上
绘制圆角
导出结果

下面就让我们逐步讲解一下这些步骤。

步骤1：将原始图片绘制到Canvas上

在这一步中，我们将使用Canvas的drawImage方法将原始图片绘制到Canvas上。具体代码如下：

const oriImg = document.getElementById('oriImg');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.width = oriImg.width;
canvas.height = oriImg.height;
ctx.drawImage(oriImg, 0, 0, canvas.width, canvas.height);

上述代码中，我们首先获取了原始图片和一个空白的Canvas，然后将Canvas的宽高设置为原始图片的宽高，并使用drawImage方法将原始图片绘制到Canvas的左上角。

步骤2：绘制圆角

在这一步中，我们将使用Canvas的arc方法绘制圆角。具体流程如下：

创建一个新的路径
移动到左上角的位置
绘制一个左上角的圆弧
绘制一条线段
绘制一个右上角的圆弧
绘制一条线段
绘制一个右下角的圆弧
绘制一条线段
绘制一个左下角的圆弧
闭合路径
剪切路径

具体代码如下：

const cornerSize = 20;
ctx.beginPath();
ctx.moveTo(cornerSize, 0);
ctx.arcTo(canvas.width, 0, canvas.width, cornerSize, cornerSize);
ctx.lineTo(canvas.width, canvas.height - cornerSize);
ctx.arcTo(canvas.width, canvas.height, canvas.width - cornerSize, canvas.height, cornerSize);
ctx.lineTo(cornerSize, canvas.height);
ctx.arcTo(0, canvas.height, 0, canvas.height - cornerSize, cornerSize);
ctx.lineTo(0, cornerSize);
ctx.arcTo(0, 0, cornerSize, 0, cornerSize);
ctx.closePath();
ctx.clip();

上述代码中，我们首先定义了圆角的大小（这里设置为20），然后使用beginPath方法创建一个新的路径。接下来，我们使用moveTo方法移动到左上角的位置，并使用arcTo方法绘制了一个左上角的圆弧，然后绘制了一条线段，以此类推，最后将路径闭合，并使用clip方法剪切路径。

步骤3：导出结果

在这一步中，我们将使用Canvas的toDataURL方法将Canvas导出成DataURL格式的图片。具体代码如下：

const resultImg = canvas.toDataURL('image/png');

通过以上代码，我们成功地使用JS Canvas实现了圆角图片。以下是一个完整的示例代码，来演示如何将图片加上圆角：

const oriImg = document.getElementById('oriImg');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.width = oriImg.width;
canvas.height = oriImg.height;
ctx.drawImage(oriImg, 0, 0, canvas.width, canvas.height);

const cornerSize = 20;
ctx.beginPath();
ctx.moveTo(cornerSize, 0);
ctx.arcTo(canvas.width, 0, canvas.width, cornerSize, cornerSize);
ctx.lineTo(canvas.width, canvas.height - cornerSize);
ctx.arcTo(canvas.width, canvas.height, canvas.width - cornerSize, canvas.height, cornerSize);
ctx.lineTo(cornerSize, canvas.height);
ctx.arcTo(0, canvas.height, 0, canvas.height - cornerSize, cornerSize);
ctx.lineTo(0, cornerSize);
ctx.arcTo(0, 0, cornerSize, 0, cornerSize);
ctx.closePath();
ctx.clip();

const resultImg = canvas.toDataURL('image/png');

以上代码中的oriImg是原始图片的<img>标签，resultImg是导出的DataURL格式图片。您可以根据自己的需要进行相应的调整和修改，以实现不同的效果。

除了上述示例外，还可以使用其它方式来实现圆角图片，这里提供另一个示例代码，以供参考：

const oriImg = document.getElementById('oriImg');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const radius = 50;

canvas.width = oriImg.width;
canvas.height = oriImg.height;

ctx.beginPath();
ctx.arc(radius, radius, radius, Math.PI, Math.PI * 1.5);
ctx.lineTo(canvas.width - radius, 0);
ctx.arc(canvas.width - radius, radius, radius, Math.PI * 1.5, Math.PI * 2);
ctx.lineTo(canvas.width, canvas.height - radius);
ctx.arc(canvas.width - radius, canvas.height - radius, radius, 0, Math.PI * 0.5);
ctx.lineTo(radius, canvas.height);
ctx.arc(radius, canvas.height - radius, radius, Math.PI * 0.5, Math.PI);
ctx.closePath();
ctx.clip();

ctx.drawImage(oriImg, 0, 0, canvas.width, canvas.height);

const resultImg = canvas.toDataURL('image/png');

上述示例代码中，我们使用了arc方法来绘制圆弧，同时也添加了clip方法来剪切路径。通过修改radius的值，可以调整圆角的大小。

希望以上的讲解能够帮助您了解JS Canvas实现圆角图片的方法。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js canvas实现圆角图片 - Python技术站