Canvas图片模糊效果学习视频：http://www.imooc.com/learn/601
Demo和学习笔记
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas玩儿转红包照片</title>
<script type="text/javascript" src="js/jquery.js"></script>
<link href="css/blur.css" rel="stylesheet" type="text/css">
<!--
手机端适配
-->
<meta name="viewport"
content="height=device-height,
width=device-width,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no" /> <!-- 不允许用户缩放尺寸 -->
</head>
<body>
<div id="blur-div">
<img src="images/image.jpg" id="blur-image">
<canvas id="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 type="text/javascript" src="js/blur.js"></script>
</body>
</html>
blur.css
@CHARSET "UTF-8";
/*取消边距*/
*{
margin: 0 0;
padding:0 0;
}
#blur-div{
margin: 0 auto;
position: relative;
overflow:hidden; /*溢出部分隐藏*/
}
#blur-image{
display:block;
margin: 0 auto;
filter:blur(20px); /* css3新属性：模糊效果 */
-webkit-filter:blur(20px);
-moz-filter:blur(20px);
-ms-filter:blur(20px);
-o-filter:blur(20px);
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:50px;
bottom:20px;
background-color: #058;
}
#reset-button:hover{
background-color: #047;
}
#show-button{
right:50px;
bottom:20px;
background-color: #085;
}
#show-button:hover{
background-color: #074;
}
blur.js
/**
*
*/
var canvasWidth=window.innerWidth;
var canvasHeight=window.innerHeight;
//获取canvas的id值
var canvas=document.getElementById("canvas");
//获取上下文环境
var context=canvas.getContext("2d");
//设置canvas的长度和宽度
canvas.width=canvasWidth;
canvas.height=canvasHeight;
var image=new Image();
var radius=50;
var clippingRegion={x:-1,y:-1,r:radius}; //剪辑区域
var leftMargin=0,topMargin=0;
image.src="images/image.jpg";
//图像加载
image.onload=function(e){
$("#blur-div").css("width",canvasWidth+"px");
$("#blur-div").css("height",canvasHeight+"px");
$("#blur-image").css("width",image.width+"px");
$("#blur-image").css("height",image.height+"px");
leftMargin=(image.width-canvas.width)/2;
topMargin=(image.height-canvas.height)/2;
$("#blur-image").css("top",String(-topMargin)+"px");
$("#blur-image").css("left",String(-leftMargin)+"px");
initCanvas();
};
function initCanvas(){
var theleft=leftMargin<0?-leftMargin:0;
var thetop=topMargin<0?-topMargin:0;
clippingRegion={x:Math.random()*(canvas.width-2*radius-2*theleft)+radius+theleft,y:Math.random()*(canvas.height-2*radius-2*thetop)+radius+thetop,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,
Math.max(leftMargin,0),Math.max(topMargin,0),
Math.min(canvas.width,image.width),Math.min(canvas.height,image.height),
leftMargin<0?-leftMargin:0,topMargin<0?-topMargin:0,
Math.min(canvas.width,image.width),Math.min(canvas.height,image.height));
context.restore(); //恢复
}
function reset(){
clearInterval(theAnimation);
initCanvas();
}
var theAnimation;
function show(){
//添加动画
theAnimation=setInterval(
function(){
//显示整个清晰的图像
clippingRegion.r+=20;
if(clippingRegion.r>2*Math.max(canvas.width,canvas.height)){
clearInterval(theAnimation); //停止动画
}
draw(image,clippingRegion);
},
30
);
}
canvas.addEventListener("touchstart",function(e){
e.preventDefault();
});
总结：
在pc端部分，学习内容比较基础。主要涉及到css3的filter属性、canvas标签的基本使用、以及如何通过小技巧形成模糊到清晰的动态效果等。在适配手机端部分，需要考虑canvas尺寸、image尺寸、剪辑尺寸等多个因素对屏幕的影响。