Canvas实现微信红包照片效果
前端之家收集整理的这篇文章主要介绍了
Canvas实现微信红包照片效果，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
本篇文章来源慕课网课程《canvas玩转红包照片》，用canvas及css3结合，实现红包照片的效果，并不做支付过程，代替的是使用2个按钮，显示清晰图片和重置圆圈可见区域。未做移动的屏幕适应
微信红包照片效果图一张模糊图片，只有鱼哥小圆圈的区域是清晰可见
原理分析：
1、先在页面放置一张原图片image，用css3的filter做模糊处理
2、在图片区域上方放置一个与图片image大小一样的canvas，放置整张清晰图片
3、通过canvas的图片剪辑方法，剪辑出一个圆圈区域，就达到了只显示一个圆圈区域的效果
目录结构：
>
index.html，blur.js，blur.css
index.htm页面代码
<
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"/>
模糊红包<a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a>
css代码blur.css
<div class="jb51code">
<pre class="brush:css;">
*{
margin:0px;
padding: 0px;
}
blur-div{
width:350px;
height:220px;
margin:0 auto;
position: relative;
overflow: hidden;
}
.button{
display: block;
position: absolute;
z-index: 200;/按钮在最上面/
width: 60px;
height: 30px;
color: white;
text-decoration: none;
text-align: center;
line-height: 30px;
border-radius: 2px;
}
reset-button{
left: 40px;
bottom: 20px;
background-color: #058;
}
reset-button:hover{
background-color: #047;
}
show-button{
right: 40px;
bottom: 20px;
background-color: #085;
}
show-button:hover{
background-color: #074;
}
canvas{
display:block;
margin:0 auto;
position: absolute;
left:0px;
top:0px;
/canvas在image之上，在按钮下，z-index大于image,小于btn/
z-index: 100;
}
blur-image{
display:block;
width:350px;
height:220px;
margin:0 auto;
/模糊效果/
filter:blur(20px);
-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大小要和image大小一样
javascript代码，方法将分片段进行讲解：
初始化一些参数
var canvas = document.getElementById("canvas");//
获取到canvas元素对象
var context = canvas.getContext("2d");//
获取2d context
//设置canvas大小和最外层div宽高一样
canvas.width = canvasWidth;
canvas.height = canvasHeight;
//用canvas显示清晰图像
var image = new Image();
image.src = "img/gd.jpg";
//剪辑区域
var radius = 30;//剪辑区域圆的半径
var clippingRegion;//剪辑区域对象
底层图片用css3设置过后就已经可以显示在页面上，是一张模糊过的图片，下一步就是在canvas上绘制剪辑图片
代码设置blur-div 和canvas宽高调整
$('#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");
initCanvas();//这是初始化canvas的方法
}
随机
clippingRegion = { //保证剪辑区域一定在有图像的地方
x: Math.random() * (canvas.width - 2 * radius) + radius,y: Math.random() * (canvas.height - 2 * radius) + radius,r: radius
};
draw(image,clippingRegion);//这是绘制image的
方法
}
context.restore();
}
点击显示按钮show，完全显示清晰图像，复用draw函数，将剪辑区域变大
2 * Math.max(canvas.width,canvas.height)) { //停止动画，否则
函数执行不停止
clearInterval(theAnimation);
}
draw(image,clippingRegion);//循环执行draw
方法，慢慢将剪辑区域的半径扩大，实现动画
效果
},30);//bug，
显示之后立即点击重置，还是会打开
图片，可能是因为定时器还没结束
}
重置则再次初始化canvas就行了，在initCanvas已经做了随机位置，所以每次点击重置都是随机位置的剪辑区域
完整blur.js代码
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//设置canvas大小和最外层div宽高一样
canvas.width = canvasWidth;
canvas.height = canvasHeight;
//用canvas显示清晰图像
var image = new Image();
var radius = 30;
//剪辑区域
var clippingRegion;
image.src = "img/gd.jpg";
//因为图像加载需要时间，所以用onload方法，等待图片加载完成后再执行函数
image.onload = function(e) {
//blur-div 和canvas宽高调整
$('#blur-div').css("width",canvasHeight + "px");
$('#blur-image').css("width",image.width + "px");
$('#blur-image').css("height",image.height + "px");
initCanvas();
}
function initCanvas() {
//重置剪辑区域，归位,随机
clippingRegion = { //保证剪辑区域一定在有图像的地方
x: Math.random() (canvas.width - 2 radius) + radius,//30-320 0-width 减掉半径30 350-302
y: Math.random() (canvas.height - 2 radius) + radius,//30-190 0-height 减掉半径30 220-302
r: radius
};
draw(image,clippingRegion);
}
//设置剪辑区域
function setClippingRegion(clippingRegion) {
context.beginPath(); //创建路径
context.arc(clippingRegion.x,false); //画圆形
context.clip();
}
function draw(image,canvas.height);
context.save();
//图像绘制前，确定剪辑区域
setClippingRegion(clippingRegion);
context.drawImage(image,0); //图片大于canvas
context.restore();
}
//完全显示清晰图像，复用draw函数，将剪辑区域变大
function show() {
//添加动画,此函数有缺点
clippingRegion.r=radius;//给半径归位
var theAnimation = setInterval(function() {
console.log("anima");
clippingRegion.r += 20; //慢慢扩大显示
//边界条件
if (clippingRegion.r > 2 * Math.max(canvas.width,canvas.height)) { //停止动画，否则函数执行不停止1000
clearInterval(theAnimation);
}
draw(image,clippingRegion);
},30);
}
//重置，initCanvas
function reset() {
initCanvas();
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
