html 代码
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- zou 网站
- </title>
- <style>
- #blur-div{ width:960px; height:600px; margin:0 auto; position: relative;
- } #blur-img{ display:block; width:960px; height:600px; margin:0 auto; filter:blur(20px);
- -webkit-filter:blur(20px); -o-filter:blur(20px); -moz-filter:blur(20px);
- position: absolute; left: 0; top:0; z-index:0; } #canvas{ display:block;
- margin:0 auto; position: absolute; left:0px; top:0px; z-index:100; } .button{
- display:block; position: absolute; z-index:200; width:100px; height:30px;
- color:white; text-decoration:none; text-align:center; line-height:30px;
- border-radius:5px; } #reset-button{ left:200px; bottom:20px; background-color:#058;
- } #reset-button:hover{ background-color:#047; } #show-button{ right:200px;
- bottom:20px; background-color: #085; } #show-button:hover{ background-color:#074;
- }
- </style>
- </head>
- <body>
- <div id="blur-div">
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201710/15/234724pz3v7hllwl31rbru.jpg"
- id='blur-img'>
- <canvas id="canvas">
- 当前浏览器不支持 Canvas, 请更换浏览器后再试
- </canvas>
- <a href="javascript:reset()" class="button" id="reset-button">
- RESET
- </a>
- <a href="javascript:show()" class="button" id="show-button">
- SHOW
- </a>
- </div>
- <script src="http://code.jquery.com/jquery-2.1.1.min.js">
- </script>
- <script>
- var canvasWidth = 960;
- var canvasHeight = 600;
- var canvas = document.getElementById("canvas");
- var context = canvas.getContext("2d");
- var radius = 50;
- canvas.width = canvasWidth;
- canvas.height = canvasHeight;
- var theAnimation;
- var image = new Image();
- var clippingRegion = {
- x: Math.random() * (canvasWidth - 2 * radius) + radius,
- y: Math.random() * (canvasHeight - 2 * radius) + radius,
- r: radius
- };
- image.src = "http://cdn.attach.qdfuns.com/notes/pics/201710/15/234724pz3v7hllwl31rbru.jpg";
- image.onload = function(e) {
- initCanvas();
- }
- function initCanvas() {
- clippingRegion = {
- x: Math.random() * (canvasWidth - 2 * radius) + radius,
- y: Math.random() * (canvasHeight - 2 * radius) + radius,
- r: radius
- };
- draw(image, clippingRegion);
- }
- function setclippingRegion(clippingRegion) {
- context.beginPath();
- context.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, Math.PI * 2, false);
- context.clip();
- }
- function draw(image, clippingRegion) {
- context.clearRect(0, 0, canvasWidth, canvasHeight);
- context.save();
- setclippingRegion(clippingRegion);
- context.drawImage(image, 0, 0);
- context.restore();
- }
- function reset() {
- clearInterval(theAnimation);
- initCanvas();
- }
- function show() {
- theAnimation = setInterval(function() {
- clippingRegion.r += 20;
- draw(image, clippingRegion);
- if (clippingRegion.r > 2 * Math.max(canvas.width, canvas.height)) {
- clearInterval(theAnimation);
- }
- },
- 30)
- }
- </script>
- </body>
- </HTML>
来源: http://www.qdfuns.com/article/27118/27fc6669988e565763bff6adee8bf4a6.html