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

微信红包照片效果图一张模糊图片，只有鱼哥小圆圈的区域是清晰可见

原理分析：

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

代码及解析

目录结构：

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-scale=no '/title模糊红包效果/title link rel='样式表href='css/blur.css' rel='外部“no follow ”/脚本类型=' text/JAVAScript ' src=' http : js/jquery-2。1 .0 .js /脚本/头体div id=' blur-div ' img id=' blur-image ' src=' http : img/GD。jpg '/canvas id=' canvas '/canvas！-大小要在射流研究…设置，不要在钢性铸铁设置-a href=' JavaScript : reset()' rel='外部no follow ' class=' button ' id=' reset-button '重置/a a href=' JAVAScript : show()' rel=' external no follow ' class=' button ' id=' show-button '显示/a /div脚本类型=' text/JAVAScript ' src=' http : js/blur。js '/脚本/正文/html CSS代码blur.css

* { margin :0 pxpadding : 0px } # blur-div { width :350 px；高度：220 pxmargin:0汽车相对位置：飞越：隐藏；}.按钮{显示：块；绝对位置：z指数： 200；/*按钮在最上面*/宽度： 60px高度： 30pxcolor:白色；文本装饰：无；文本对齐：中心；线高： 30px边界半径： 2px} #重置按钮{ left: 40pxbottom: 20px背景色： # 058;} # reset-button :悬停{底色： # 047；} # show-button { right : 40px；bottom: 20px背景色： # 085;} # show-button :悬停{底色： # 074；} #画布{ display : blockmargin :0 auto绝对位置：left:0pxtop:0px/*画布在图像之上，在按钮下，z索引大于图像，小于BTN */z指数： 100；} #模糊图像{显示：块宽度宽度：350像素高度：220 pxmargin:0 auto/*模糊效果*/滤镜：模糊(20px)；-web套件-滤镜：模糊(20px)；-moz-滤镜：模糊(20px)；-ms-滤镜：模糊(20px)；-o型滤镜：模糊(20px)；绝对位置：left :0 pxtop :0 pxz-index : 0；}设置帆布大小要和图像大小一样

爪哇岛描述语言代码，方法将分片段进行讲解：初始化一些参数

var canvasWidth=window。内部宽度；//最外层差异宽=窗口宽高，为了适应var canvasHeight=window。内部高度；var canvas=文档。getelementbyid(' canvas ')；//获取到帆布元素对象var上下文=canvas。get context(' 2d ')；//获取2d上下文/设置帆布大小和最外层差异宽高一样canvaswidth=canvaswidth canvas . height=canvasHeight//用帆布显示清晰图像var图像=新图像();图像。src=' img/GD。jpg '；//剪辑区域定义变量半径=30;//剪辑区域圆的半径var clippingRegion//剪辑区域对象底层图片用css3设置过后就已经可以显示在页面上，是一张模糊过的图片，下一步就是在帆布上绘制剪辑图片

image.onload=function(e) { //此处射流研究…代码设置模糊分区和帆布宽高调整$('#blur-div ').css('width '，canvasWidth ' px ')；$('#blur-div ').css('height '，canvasHeight ' px ')；$(' #模糊图像')。css('width '，图像。宽度' px '；//因为图像大小变化，所以重新设置$(' #模糊图像')。css('高度'，图像。高度‘px’；initCanvas()；//这是初始化帆布的方法}函数initCanvas() { //重置剪辑区域，归位，随机剪辑区域={ //保证剪辑区域一定在有图像的地方x :数学。random()*(画布。宽度-2 *半径)半径，y :数学。random()*(画布。高度-2 *半径)半径，r :半径}；绘图（图像、剪辑区域);//这是绘制图像的方法}//设置剪辑区域函数setClippingRegion(clippingRegion){ context。begin path()；//创建路径context.arc(剪辑区域. x，剪辑区域. y，剪辑区域. r，0，数学.PI * 2，假);//画圆形语境。clip()；}函数绘制(图像、剪辑区域){上下文。清除矩形(0，0，canvas.width，canvas。高度)；语境。save()；//图像绘制前，确定剪辑区域setClippingRegion(剪辑区域);context.drawImage(image，0，0)；语境。restore()；}点击显示按钮展示，完全显示清晰图像，复用画函数，将剪辑区域变大

函数show() { //添加动画var a imation=set interval(function(){ clipping region。r=20//慢慢扩大显示//边界条件if(剪辑区域。r 2 *数学。max(画布。宽度，画布.高度)){ //停止动画，否则函数执行不停止清除间隔（图像);}绘图（图像、剪辑区域);//循环执行画方法，慢慢将剪辑区域的半径扩大，实现动画效果}, 30);//bug，显示之后立即点击重置，还是会打开图片，可能是因为定时器还没结束}重置则再次初始化帆布就行了，在initCanvas已经做了随机位置，所以每次点击重置都是随机位置的剪辑区域

//重置，initCanvasfunction reset(){ initCanvas()；}完整blur.js代码

var canvasWidth=window。内部宽度；//最外层差异宽=窗口宽高，为了适应var canvasHeight=window。内部高度；var canvas=文档。getelementbyid(' canvas ')；var上下文=canvas。get context(' 2d ')；//设置帆布大小和最外层差异宽高一样canvaswidth=canvaswidth canvas . height=canvasHeight//用帆布显示清晰图像var图像=新图像();定义变量半径=30;//剪辑区域var clippingRegionimage。src=' img/GD。jpg '；//因为图像加载需要时间，所以用装载方法，等待图片加载完成后再执行函数图像。onload=function(e){//blur-div和帆布宽高调整$('#blur-div ').css('width '，canvasWidth ' px ')；$('#blur-div ').css('height '，canvasHeight ' px ')；$(' #模糊图像')。css('width '，图像。宽度' px '；$(' #模糊图像')。css('高度'，图像。高度‘px’；initCanvas()；}函数initCanvas() { //重置剪辑区域，归位，随机剪辑区域={ //保证剪辑区域一定在有图像的地方x :数学。random()*(画布。宽度-2 *半径)半径，//30-320 0-宽减掉半径30 350-30 * 2y :数学。random()*(画布。高度-2 *半径)半径，//30-190 0-高减掉半径30 220-30*2 r:半径};绘图（图像、剪辑区域);}//设置剪辑区域函数setClippingRegion(clippingRegion){ context。begin path()；//创建路径context.arc(剪辑区域. x，剪辑区域. y，剪辑区域. r，0，数学.PI * 2，假);//画圆形语境。clip()；}函数绘制(图像、剪辑区域){上下文。清除矩形(0，0，canvas.width，canvas。高度)；语境。save()；//图像绘制前，确定剪辑区域setClippingRegion(剪辑区域);context.drawImage(image，0，0)；//图片大于画布上下文。restore()；}//完全显示清晰图像，复用画函数，将剪辑区域变大函数show() { //添加动画，此函数有缺点剪辑区域. r=半径；//给半径归位var ANIMATION=设置间隔(function(){ console。日志(' anima ')；clippingRegion.r=20//慢慢扩大显示//边界条件if(剪辑区域。r 2 *数学。max(画布。宽度，画布.高度)){ //停止动画，否则函数执行不停止1000清除间隔（图像);}绘图（图像、剪辑区域);}, 30);}//重置，initCanvasfunction reset(){ initCanvas()；}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。