因为地图上要展示一个渐变圆圆环的图标，找了很久没有找到现成满意的，于是就干脆自己使用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>
在这个示例中，我们完成了以下步骤：
- Canvas绘制渐变圆环。
- 添加一个按钮，当点击按钮时，会触发下载图像的功能。
- 使用
toDataURL方法将Canvas内容转换为PNG格式的Data URL。 - 创建一个隐藏的链接并设置其
href属性为Data URL，download属性为文件名。 - 触发点击事件下载图像，最后移除这个隐藏的链接。
这样，用户点击按钮后就可以下载Canvas上的图形了。
标签：Canvas,const,渐变,ctx,canvas,link,下载,圆环 From： https://blog.csdn.net/cuijiying/article/details/144692376