Canvas实现微信红包照片效果

本篇文章来源慕课网课程《canvas玩转红包照片》，用canvas及css3结合，实现红包照片的效果，并不做支付过程，代替的是使用2个按钮，显示清晰图片和重置圆圈可见区域。未做移动的屏幕适应

微信红包照片效果图

原理分析：

先在页面放置一张原图片image，用css3的filter做模糊处理
在图片区域上方放置一个与图片image大小一样的canvas，放置整张清晰图片
通过canvas的图片剪辑方法，剪辑出一个圆圈区域，就达到了只显示一个圆圈区域的效果

代码及解析
目录结构：

index.html，blur.js，blur.css

index.htm页面代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><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"/><title>模糊红包效果</title><link rel="stylesheet" href="css/blur.css" /><script type="text/javascript" src="js/jquery-2.1.0.js"></script>   </head><body><div id="blur-div"><img id="blur-image" src="img/gd.jpg" /><canvas id="canvas"></canvas><!--大小要在js设置，不要在css设置--><a href="javascript:reset()" class="button" id="reset-button">重置</a><a href="javascript:show()" class="button" id="show-button">显示</a></div><script type="text/javascript" src="js/blur.js"></script></body>
</html>

css代码blur.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 canvasWidth = window.innerWidth; //最外层div宽=窗口宽高，为了适应
var canvasHeight = window.innerHeight;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上绘制剪辑图片

image.onload = function(e) {//此处js代码设置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的方法
}

function initCanvas() {//重置剪辑区域，归位,随机clippingRegion = { //保证剪辑区域一定在有图像的地方x: Math.random() * (canvas.width - 2 * radius) + radius, y: Math.random() * (canvas.height - 2 * radius) + radius,r: radius};draw(image, clippingRegion);//这是绘制image的方法
}

//设置剪辑区域
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();
}

点击显示按钮show，完全显示清晰图像，复用draw函数，将剪辑区域变大

function show() {//添加动画var theAnimation = setInterval(function() {clippingRegion.r += 20; //慢慢扩大显示//边界条件if (clippingRegion.r > 2 * Math.max(canvas.width, canvas.height)) { //停止动画，否则函数执行不停止clearInterval(theAnimation);}draw(image, clippingRegion);//循环执行draw方法，慢慢将剪辑区域的半径扩大，实现动画效果}, 30);//bug，显示之后立即点击重置，还是会打开图片，可能是因为定时器还没结束
}

重置则再次初始化canvas就行了，在initCanvas已经做了随机位置，所以每次点击重置都是随机位置的剪辑区域

//重置，initCanvas
function reset() {initCanvas();
}

完整blur.js代码

var canvasWidth = window.innerWidth; //最外层div宽=窗口宽高，为了适应
var canvasHeight = window.innerHeight;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", canvasWidth + "px");$('#blur-div').css("height", 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-30*2y: Math.random() * (canvas.height - 2 * radius) + radius, //30-190      0-height  减掉半径30     220-30*2r: 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); //图片大于canvascontext.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)) { //停止动画，否则函数执行不停止1000clearInterval(theAnimation);}draw(image, clippingRegion);}, 30);
}//重置，initCanvas
function reset() {initCanvas();
}

Canvas实现微信红包照片效果相关推荐

Flutter使用Canvas实现微信红包领取效果
效果最终实现的整体效果如下: 实现看完效果以后,接下来就带领大家来看看是怎样一步一步实现最终效果的,在正式动手写代码之前,先对整个效果做一个简单的拆分,将其分为五个部分: 点击弹出红包红包整体布 ...
Canvas模仿微信红包照片
1.最终效果: 2.实现过程: 1.将图片加载出来,并加上模糊效果: index.html: <!DOCTYPE html> <html> <head lang=&quo ...
产品也要看气质 ——从支付宝新春送福和微信红包照片说起
2016年春节还未到,但从1月底已经能感受浓浓的年味了,这当然少不了互联网的推波助澜,首当其冲的莫过于各家花样百出的红包大战.说到红包,就不得不提2家巨头的代表产品,支付宝和微信(不知曾几何时,我们越 ...
android仿微信红包动画,Android仿打开微信红包动画效果实现代码
首先看下效果: 实现原理: 准备3张不同角度的图片,通过AnimationDrawable帧动画进行播放即可代码实现: 1.编写动画xml文件: 根标签为animation-list,其中onesh ...
php微信红包雨效果,【微信红包雨】原来红包还可以这么玩！你造吗？
原标题:[微信红包雨] 原来红包还可以这么玩!你造吗? 哈啰,大家好,我是林涛今天用实战演练的方法带着小伙伴们做"精推". 每一次体验的小伙伴们想必被今晚的红包雨吓到了,事实上我 ...
手把手教你免费看IOS微信红包照片
说明: 这里介绍了一种在IOS上可以不用发红包就可以看到红包照片的方法. 原理: 实际上微信朋友圈的红包照片是在客户端才加上的那一层膜,在发了红包之后会把膜去掉,也就是在从服务器传到客户端的照片还是不 ...
微信红包照片来了，用变色龙隐形二维码赚点零花钱
在微信支付已经日趋成熟化的今天,红包已经不仅仅是逢年过节时才有,有了微信,随时随地都可以收发红包."今天你收到红包了吗?"已经成为很多人的日常问候.但单纯的抢红包.直接收发红包又或 ...
如何获取微信红包照片的原始清晰图片
2016-02-07,腾讯再次开通了朋友圈的微信红包功能,我的朋友圈着实被目不暇接的高糊照片刷了一把屏.在这里记录一下查看清晰图片的方法. 首先,需要抓取红包照片的地址.怎么抓取?请看传送门:http ...
php微信红包雨效果,微信红包雨特效口令大全微信红包雨特效口令有哪些
微信红包雨特效口令有哪些?新年牛气冲天,在微信有一场大型的红包雨送给玩家.那么特效口令有哪些呢,下面小编给大家带来微信红包雨特效口令大全,一起来看看吧. 微信红包雨特效口令大全一.王者荣耀 [排位] ...

Canvas实现微信红包照片效果

Canvas实现微信红包照片效果相关推荐

最新文章

热门文章