【原生JS和canvans实现图片的高斯模糊（qq音乐图片背景效果）】

最新推荐文章于 2023-10-24 00:46:02 发布

是你那

最新推荐文章于 2023-10-24 00:46:02 发布

阅读量1.4k

点赞数 1

文章标签： javascript 前端 html css

本文链接：https://blog.csdn.net/jsmylo/article/details/122059181

版权

本文介绍了如何使用JavaScript和HTML Canvas实现图片的高斯模糊效果，适用于前端开发中如QQ音乐图片背景的视觉效果。首先准备好图片资源，然后创建基本HTML页面和CSS样式。接着，实现高斯模糊的算法并封装成自执行函数。通过Image对象加载图片，并在onload事件中调用模糊函数。最后，展示了调整Canvas宽高以改变模糊程度的效果，强调了这种方法与直接设置图片透明度的不同之处。

摘要由CSDN通过智能技术生成

1.基本准备（图片），放到img文件夹下面（我比较喜欢叫img）,自己随意。高斯模糊背景图

2.html基本页面。基本css。需要指定元素的id或者类名，以便后续获取dom元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>test</title>
		<style type="text/css">
			*{
     
				margin: 0;
				padding: 0;
			}
			body,html{
     
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,0.6);
			}
			#box{
     
				width: 1200px;
				height: 600px;
				border: 1px solid #26F2E0;
				position: absolute;
				top: 50%;
				margin-top: -300px;
				left:50%;
				margin-left: -600px;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>