js canvas实现红包照片效果
程序员文章站
2022-06-12 14:29:24
今天跟着学习了一个制作红包照片类似功能的demo，很有意思，所以在这里分享代码给大家，可以直接使用。
先贴出效果图大家看一下：
点击重置后会以随机一个点为圆心生成半...
今天跟着学习了一个制作红包照片类似功能的demo，很有意思，所以在这里分享代码给大家，可以直接使用。
先贴出效果图大家看一下：
点击重置后会以随机一个点为圆心生成半径为50px的圆，然后显示清晰的图像；
点击显示后会全部显示清晰的图像；
功能虽然很少，但是很有意思不是吗，而且做好了适配可以在不同分辨率大小的设备上都可以玩。
只需要js+css+html就可以实现，不过需要引入jquery
下面po出完整代码：
demo.html:
<!doctype html> <html> <head lang="en"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>canvas玩儿转红包照片</title> <script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js" type="text/javascript"></script> <link href="img.css" rel="external nofollow" 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/1.jpg" id="blur-image"> <canvas id="canvas"> </canvas> <a href="javascript:reset()" rel="external nofollow" class="button" id="reset-button"> 重置 </a> <a href="javascript:show()" rel="external nofollow" class="button" id="show-button"> 显示 </a> </div> <script type="text/javascript" src="img.js"></script> </body> </html>
img.css:
*{
margin: 0 0;
padding: 0 0;
}
#blur-div{
/* width: 800px;
height: 500px;*/
margin: 0 auto;
position: relative;
/*超过部分隐藏*/
overflow: hidden;
}
#blur-image {
display: block;
/*width: 800px;
height: 500px;*/
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轴上的值*/
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;
}
img.js:
var canvaswidth = window.innerwidth
var canvasheight = window.innerheight
var canvas = document.getelementbyid("canvas")
var context = canvas.getcontext("2d")
canvas.width=canvaswidth
canvas.height=canvasheight
var radius = 50
var image = new image()
var clippingregion = {x:-1,y:-1,r:radius}
var leftmargin = 0, topmargin=0
var a;
image.src = "images/1.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", "-" + topmargin + "px")
$("#blur-image").css("left", "-" + leftmargin + "px")
initcanvas()
}
function initcanvas(){
clearinterval(a)
clippingregion = {x:math.random()*(canvas.width-2*radius)+radius,y:math.random()*(canvas.height-2*radius)+radius,r:radius}
console.log(canvas.width);
console.log(canvas.height);
clippingregion.r = 0;
var id = setinterval(
function(){
clippingregion.r += 2;
if(clippingregion.r > 50){
clearinterval(id)
}
draw(image,clippingregion)
},
30
)
}
function setclippingregion(clippingregion){
/*创建剪辑区域的路径*/
context.beginpath()
/*第六个参数表示是顺时针还是逆时针绘制*/
context.arc(clippingregion.x, clippingregion.y, clippingregion.r, 0, math.pi*2, false)
/*希望路径是个剪辑区域调用此方法*/
context.clip()
}
function draw(image ,clippingregion){
/*每次绘制之前，对canvas的内容进行清空*/
context.clearrect(0,0,canvas.width,canvas.height)
/*存储canvas的当前状态*/
context.save()
/*剪辑出一个圆形的区域*/
setclippingregion(clippingregion)
/*开始画*/
//context.drawimage(image, 0 , 0)
/*leftmargin, topmargin, canvas.width, canvas.height表示image剪出这么大
0, 0, canvas.width, canvas.height 表示canvas的大小
*/
context.drawimage(image,
leftmargin, topmargin, canvas.width, canvas.height,
0, 0, canvas.width, canvas.height)
/*canvas的状态恢复*/
context.restore()
}
function reset(){
initcanvas();
}
function show(){
/*此函数是内置函数，表示每隔多少秒就执行前面的函数 所以第一个参数是函数，后面是间隔时间*/
var id = setinterval(
function(){
a = id;
clippingregion.r += 20
if(clippingregion.r > 2*math.max(canvas.width,canvas.height)){
/*用来关闭函数执行的*/
clearinterval(id);
}
draw(image ,clippingregion)
},
30
)
}
/*阻止滑动操作*/
/*canvas.addeventlistener("touchstart",function(e){
e.preventdefault()
});*/
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 小地方的门户站点建设经验