- it技术
- canvas绘制模糊红包照片
效果如下
按钮显示图片
index.html
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<meta name
="viewport"
content
="width=device-width, initial-scale=1.0">
<title
>Document
</title
>
<script src
="./jquery.min.js"></script
>
<link rel
="stylesheet" href
="./blur.css">
</head
>
<body
>
<div id
="blur-div">
<img id
="blur-image" src
="./4.jpg" alt
="">
<canvas id
="canvas"></canvas
>
<a href
="javascript:reset()" class="button" id
="reset-button">RRESET</a
>
<a href
="javascript:show()" class="button" id
="show-button">SHOW</a
>
</div
>
<script src
="./blur.js"></script
>
</body
>
</html
>
blur.css
* {
margin: 0
;
padding: 0
;
}
#blur-div {
width: 800px
;
height: 600px
;
margin: 0 auto
;
position: relative
;
}
#blur-image {
display: block
;
width: 800px
;
height: 600px
;
margin: 0 auto
;
overflow: hidden
;
filter: blur(10px
);
position: absolute
;
left: 0px
;
top: 0px
;
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: antiquewhite
;
}
#reset-button:hover {
background-color: aqua
;
}
#show-button {
right: 200px
;
bottom: 20px
;
background-color: antiquewhite
;
}
#show-button:hover {
background-color: aqua
;
}
blur.js
var canvasWidth
= 800
var canvasHeight
= 600
var canvas
= document
.getElementById('canvas')
var context
= canvas
.getContext('2d')
canvas
.width
= canvasWidth
canvas
.height
= canvasHeight
var image
= new Image()
var radius
= 50
var clippingRegion
= {
x
: -1,
y
: -1,
r
: radius
}
image
.src
= '4.jpg'
image
.onload = function(e
) {
initCanvas()
}
function initCanvas() {
clippingRegion
= {
x
: Math
.random() * (canvas
.width
- 2 * radius
) + radius
,
y
: Math
.random() * (canvas
.height
- 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, canvas
.width
, canvas
.height
)
context
.save()
setClippingRegion( clippingRegion
)
context
.drawImage(image
, 0, 0)
context
.restore()
}
function show() {
var theAn
= setInterval(
function() {
clippingRegion
.r
+= 20
if (clippingRegion
.r
> 2 * Math
.max(canvas
.width
, canvas
.height
)) {
clearInterval(theAn
)
}
draw(image
, clippingRegion
)
}, 30
)
}
function reset() {
initCanvas()
}
2.手动刮除模糊，显示图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>像素级图像操作
</title>
<style>
#main {
width: 1000px;
margin: 0 auto;
position: relative;
overflow: hidden;
height: 630px;
border: 2px solid #fff;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
}
#image {
display: block;
width: 100%;
position: absolute;
z-index: 0;
filter: blur(40px);
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-ms-filter: blur(20px);
-o-filter: blur(20px);
}
#canvas {
display: block;
position: absolute;
}
#main a {
display: block;
width: 80px;
height: 40px;
text-align: center;
line-height: 40px;
border-radius: 5px;
background: #eee;
position: absolute;
bottom: 20px;
text-decoration: none;
color: black;
z-index: 2;
}
#main a:nth-of-type(1) {
background: #eee;
right: 20px;
}
</style>
</head>
<body style="text-align: center;">
<div id="main">
<img src="./4.jpg" alt="" id="image" />
<canvas id="canvas"></canvas>
<a href="javascript:show();">显示
</a>
</div>
<script>
var canvasWidth = 1000;
var canvasHeight = 630;
var canvas = document.getElementById("canvas");
var ctxA = canvas.getContext("2d");
var onOff = false;
canvas.width = canvasWidth;
canvas.height = canvasHeight;
var radius = 50;
var image = new Image();
image.src = "./4.jpg";
image.onload = function () {
canvas.addEventListener("mousemove", drawCircle, false);
canvas.addEventListener("mousedown", moveDown, false);
canvas.addEventListener("mouseup", moveUp, false);
canvas.addEventListener("mouseout", moveUp, false);
};
function drawCircle(e) {
var ev = ev || window.event;
var x = ev.clientX - canvas.getBoundingClientRect().left;
var y = ev.clientY - canvas.getBoundingClientRect().top;
if (onOff) {
if (radius < canvasHeight) {
drawClip(x, y, radius);
}
}
return false;
}
function moveDown() {
onOff = true;
if (radius < canvasHeight) {
drawCircle();
}
}
function moveUp() {
onOff = false;
if (radius < canvasHeight) {
}
}
function drawClip(x, y, r) {
ctxA.save();
ctxA.beginPath();
ctxA.arc(x, y, r, 0, Math.PI * 2, false);
ctxA.clip();
ctxA.drawImage(image, 0, 0, canvasWidth, canvasHeight);
ctxA.restore();
}
function show() {
var time = null;
clearInterval(time);
time = setInterval(function () {
radius += 10;
if (radius > canvasHeight) {
clearInterval(time);
}
drawClip(canvasWidth / 2, canvasHeight / 2, radius);
}, 30);
}
</script>
</body>
</html>
