（二）Canvas实现渐变圆环并下载为图片

匹马夕阳

已于 2025-01-10 22:36:43 修改

阅读量1.1k

点赞数 32

分类专栏： Canvas技术集锦文章标签： javascript 图形渲染前端

于 2024-12-24 13:43:10 首次发布

本文链接：https://blog.csdn.net/cuijiying/article/details/144692376

版权

Canvas技术集锦专栏收录该内容

6 篇文章

订阅专栏

因为地图上要展示一个渐变圆圆环的图标，找了很久没有找到现成满意的，于是就干脆自己使用Canvas画一个，颜色透明度什么的都额可以自己调整，Nice。其实模糊的圆环原理也很简单，就是绘制多个圆形，透明度设置不同就行了。

然后页面上添加一个按钮，并通过点击该按钮将Canvas上的图形下载下来，可以使用toDataURL方法将Canvas内容转换为数据URL，然后创建一个链接来下载该图像。

在这里插入图片描述
以下是一个完整的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blurred Ring on Canvas</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <button id="downloadBtn">下载图片</button>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // 中心点和半径
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;
        const innerRadius = 60;
        const outerRadius = 100;

        // 画多个同心圆以实现渐变效果
        for (let i = 0; i < 50; i++) {
            const radius = innerRadius + (outerRadius - innerRadius) * (i / 50);
            const alpha = 1 - (i / 50);
            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, false);
            ctx.strokeStyle = `rgba(0, 0, 255, ${alpha})`; // 颜色为蓝色，透明度递减
            ctx.lineWidth = 2;
            ctx.stroke();
        }

        // 点击按钮下载图像
        document.getElementById('downloadBtn').addEventListener('click', function() {
            // 将Canvas内容转换为Data URL
            const dataURL = canvas.toDataURL('image/png');
            // 创建一个隐藏的链接
            const link = document.createElement('a');
            link.href = dataURL;
            link.download = 'canvas_image.png'; // 设置下载文件的名称
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });
    </script>
</body>
</html>