使用canvas把图片变成圆角

在前端开发中，你可以使用HTML的<canvas>元素来将图片变成圆角。以下是一个简单的步骤指南：

准备HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角图片</title>
</head>
<body>
    <canvas id="myCanvas" width="300" height="300"></canvas>
    <script src="script.js"></script>
</body>
</html>

在JavaScript中处理图片：

在script.js文件中，你可以使用以下代码来加载图片，并在canvas上绘制带有圆角的图片：

window.onload = function() {
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.src = 'path_to_your_image.jpg'; // 替换为你的图片路径

    img.onload = function() {
        // 设置圆角半径
        var radius = 20;

        // 开始绘制路径（圆角矩形）
        ctx.beginPath();
        ctx.moveTo(radius, 0);
        ctx.lineTo(canvas.width - radius, 0);
        ctx.quadraticCurveTo(canvas.width, 0, canvas.width, radius);
        ctx.lineTo(canvas.width, canvas.height - radius);
        ctx.quadraticCurveTo(canvas.width, canvas.height, canvas.width - radius, canvas.height);
        ctx.lineTo(radius, canvas.height);
        ctx.quadraticCurveTo(0, canvas.height, 0, canvas.height - radius);
        ctx.lineTo(0, radius);
        ctx.quadraticCurveTo(0, 0, radius, 0);
        ctx.closePath();

        // 裁剪路径（这样之后的绘制只在这个路径内可见）
        ctx.clip();

        // 绘制图片
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    };
};