今天跟着学习了一个制作红包照片类似功能的演示，很有意思，所以在这里分享代码给大家，可以直接使用。

先贴出效果图大家看一下：

点击重置后会以随机一个点为圆心生成半径为50px的圆，然后显示清晰的图像；

点击显示后会全部显示清晰的图像；

功能虽然很少，但是很有意思不是吗，而且做好了适配可以在不同分辨率大小的设备上都可以玩。

只需要js css html就可以实现，不过需要引入框架

下面邮局出完整代码：

demo.html:

！DOCTYPE HTMl HTMl head lang=' en ' meta http-equiv=' Content-TYPe ' Content=' text/HTMl；字符集=utf-8 '标题画布玩儿转红包照片/title脚本src=' http :http://cdn。bootscs。com/jquery/2。2 .0/jquery。量滴js ' type=' text/JAVAScript '/script link href=' img。CSS“rel=”外部no follow“rel=”样式表type=' text/CSS '/meta name=' viewport ' content=' height=device-height，width=device-width，初始比例=1.0,最小比例=1.0,最大重置/a a href=' JAVAScript : show()' rel=' external no follow ' class=' button ' id=' show-button '显示/a/div脚本类型=' text/JAVAScript ' src=' http : img。js '/script/body/html img。CSS :

* { margin : 0 0 padd : 0 } # blur-div {/* width : 800 px；高度： 500像素；*/margin : 0 auto；相对位置：/*超过部分隐藏*/overflow:隐藏；} #模糊图像{ display: block/*宽度： 800像素；高度： 500像素；*/margin : 0 auto；/*滤镜模糊括号内值越大，就越模糊*/滤镜：模糊(20px)；-web套件-滤镜：模糊(20px)；-moz-滤镜：模糊(20px)；-ms-滤镜：模糊(20px)；-o型滤镜：模糊(20px)；绝对位置：left: 0pxtop: 0px/*表示在z轴上的值*/z-index : 0；} #画布{ display:块；margin: 0自动绝对位置：left : 0pxtop : 0pxz-index : 100；} .按钮{显示：块；绝对位置：z指数： 200；宽度： 100像素；高度： 30pxcolor:白色；文本装饰：无；文本对齐：中心；线高： 30px边界半径： 5px} #重置按钮{ left: 50pxbottom: 20px背景色： # 058;} # reset-button :悬停{底色： # 047；} # show-button { right : 50px；bottom: 20px背景色： # 085;} # show-button :悬停{底色： # 074；}img.js:

var canvasWidth=window。inner width var canvasHeight=window。innerheight var canvas=document。getelementbyid(' canvast ')var context=canvaswidthcanvas。width=canvaswidthcanvas。高度=50 var Image=new Image()var裁剪区域={ x :-1，y:-1，r:radius} var leftMargin=0，topMargin=0 var a；图像。src=' images/1。jpg '图像。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('高度'，图像。高度' px ')左边距=(图像。宽度-画布。宽度)/2 topMargin=(图像。高度-帆布。高度)/2 $(' #模糊图像').css('top '，'-' topMargin 'px') $('#blur-image ').css('left '，'-' leftMargin 'px') initCanvas()}函数init canvas(){ clearInterval(a)剪辑区域={ x :路径。random()*(画布。宽度-2 *半径)半径，y :路径。random()*(画布。高度-2 *半径)半径，r : radius }控制台。原木(帆布。宽度)；控制台。原木(帆布。高度)；剪辑区域。r=0；var id=setInterval(function(){裁剪区域。r=2；if(剪辑区域。r50){ clearInterval(id)} draw(image，clippingRegion) }，30 ) }函数setclipping区域(剪辑区域){/*创建剪辑区域的路径*/context.beginPath() /*第六个参数表示是顺时针还是逆时针绘制*/context.arc(剪辑区域. x，剪辑区域. y，剪辑区域. r，0，数学.PI*2，假)/*希望路径是个剪辑区域调用此方法*/context.clip()}函数绘图(图像、剪辑区域){ /*每次绘制之前，对帆布的内容进行清空*/context.clearRect(0，0，canvas.width，canvas.height) /*存储帆布的当前状态*/context.save() /*剪辑出一个圆形的区域*/setClippingRegion(剪辑区域)/*开始画*///context.drawImage(image，0，0) /*leftMargin，topMargin，canvas.width，canvas.height表示图像剪出这么大0,0,画布。宽度，画布。高度表示帆布的大小*/context.drawImage(image，leftMargin，topMargin，canvas.width，canvas.height，0，0，canvas.width，canvas.height) /*canvas的状态恢复*/context.restore()}函数reset(){ initCanvas()；}函数show(){ /*此函数是内置函数，表示每隔多少秒就执行前面的函数所以第一个参数是函数，后面是间隔时间*/var id=SetInterval(function(){ a=id；剪辑区域。r=20 if(限幅区域。r 2 *数学。max(画布。宽度，画布.高度)){ /*用来关闭函数执行的*/ClearInterval(id)；}绘图（图像，剪辑区域)},30 )} /*阻止滑动操作*//*画布。addeventlistener(' touch start '，函数(e){ e . prevent default()})；*/

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。