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

最新推荐文章于 2022-01-25 13:08:43 发布

原创

最新推荐文章于 2022-01-25 13:08:43 发布 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html #css

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

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>