js实现图片模糊聚焦放大显示效果代码-html代码-BFW代码库

js实现图片模糊聚焦放大显示效果代码

代码语言：html

代码描述：采用js实现的一个模糊聚焦的图片，点击show按钮焦点散开显示全局图片的动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <style>
        body,canvas,div {
	padding:0;
	margin:0;
}
a {
	text-decoration:none;
}
#can-div {
	margin:0 auto;
	position:relative;
	overflow:hidden;
}
.img-blur {
	display:block;
	margin:0 auto;
	filter:blur(20px);
	position:absolute;
	left:0;
	z-index:0;
}
#canvas {
	display:block;
	position:absolute;
	top:0;
	left:0;
	z-index:100;
}
.btn {
	color:#fff;
	width:80px;
	height:30px;
	z-index:200;
	border-radius:5px;
	text-align:center;
	line-height:30px;
}
#btn-reset {
	background:#058;
	position:absolute;
	bottom:20px;
	left:50px;
}
#btn-reset:hover {
	background:#047;
}
#btn-show {
	background:#085;
	position:absolute;
	bottom:20px;
	right:50px;
}
#btn-show:hover {
	background:#074;
}

    </style>
</head>

<body>
    <div id="can-div">
        <img class="img-blur" src="//repo.bfw.wiki/bfwrepo/image/616771d1012af.png">
        <canvas id="canvas"></canvas>
        <a href="javascript:reset()" class="btn" id="btn-reset">reset</a>
        <a href="javascript:show()" class="btn" id="btn-show">show</a>
    </div>
    <script>
        var canvasWidth = window.innerWidth;
 var canvasHeight = window.innerHeight;
 var canvas = document.getElementById('canvas');
 var context = canvas.getContext('2d');
 var can_div = document.getElementById('can-div');
 var can_img = can_div.getElementsByClassName('img-blur')[0];
 canvas.width = canvasWidth;
 canvas.height = canvasHeight;
 var img = new Image();
 var radius = 50;
 var topMargin = 0;
 var leftMargin = 0;
 var clipImg = {
     x: Math.random() * (canvas.width - 2 * radius) + radius,
     y: Math.random() * (canvasHeight - 2 * radius) + radius,
     r: radius
 };
 img.src = '//repo.bfw.wiki/bfwrepo/image/616771d1012af.png';
 img.onload = function() {
     can_div.style.width = canv.........完整代码请登录后点击上方下载按钮下载查看