canvas--微信红包效果

示例:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 
<title>玩转微信红包照片</title>
<script type="text/javascript" src="js/jquery.js" ></script>
<style>
/*使用css3的filter实现blur效果*/
*{ margin: 0; padding: 0;}
#blur-div{width: 800px; height: 600px; overflow: hidden; display: block; margin: 0 auto; position: relative;}
#image{  position: absolute; left: 0; top: 0; z-index: 0;filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */   
    -webkit-filter: blur(10px); /* Chrome, Opera */
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);    
            filter: blur(10px);}
#canvas{ display: block; position: absolute; left: 0; top: 0; z-index: 10; #background: #c03;}
.button{ text-align: center; position: absolute; width: 100%; bottom:0; z-index: 20;}
.button a{ line-height: 30px; display: inline-block; margin: 0 15px; background: #0E64A9; color: #fff;
 text-decoration: none; padding: 0 15px; border-radius:5px;}
.button a:hover{ background:#06C1AE;}
.redpacket{ display: none; position: fixed; width: 70%; top: 15%; left:15%; z-index: 110;}
.red_font{ position: absolute; left: 0; top: 30%; color: #fec900; font-size: 20px; width:100%; text-align: center;}
.redpacket img{width: 100%;}
</style>
</head>
<body>
<div id="blur-div">
   <img src="image/timg.jpg" id="image"> <!--使用css3制作高斯模糊照片-->
   <canvas id="canvas"></canvas>
   <div class="button" >
<a href="javascript:reset()" id="reset-button">reset</a>
<a href="javascript:show()" id="show-button" data-id='0'>查看清晰图片</a>
   </div>
</div>
<div class="redpacket">
<img src="image/redpacket.png">
<p class="red_font">点击红包查看</p>
</div>
<script>
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 image=new Image()
//定义剪辑区域
var clippingRegion={x:400,y:200,r:radius}
//设置大图片在整个屏幕的left值和top值
var leftMargin=0,topMargin=0
//剪辑区域半径
var radius=50
image.src="image/timg.jpg"
image.οnlοad=function(){
$('#blur-div').css('width',canvaswidth+'px')
$('#blur-div').css('height',canvasheight+'px')
$('#image').css('width',image.width+'px')
$('#image').css('height',image.height+'px')
leftMargin=(image.width-canvas.width)/2
topMargin=(image.width-canvas.height)/2
$('#image').css("top",String(-topMargin)+'px');
$('#image').css("left",String(-leftMargin)+'px');
initCanvas()  //初始化canvas
}
function initCanvas(){
//归位操作
//边界问题
var theleft=leftMargin<0?-leftMargin:0
var thetop=topMargin<0?-topMargin:0
//canvas.width-2*radius-2*theleft)+radius+theleft剪辑区域的圆心一定实在有图像的范围内                                 
clippingRegion={x:Math.random()*(canvas.width-2*radius-2*theleft)+radius+theleft,y:Math.random()*(canvas.height-2*radius-2*thetop)+radius+thetop,r:radius}
draw(image,clippingRegion)
}
function setclippingRegion(){
context.beginPath();
//console.log(clippingRegion.r);
context.arc(clippingRegion.x,clippingRegion.y,clippingRegion.r,0,Math.PI*2)//由于剪辑区域实在函数的外面定义的点击
//show()之后 剪辑区域发生改变 所以每次reset之后点击区域需要归位
context.clip()  //从原始画布剪切任意形状和尺寸的区域
}
function draw(image){
context.clearRect(0,0,canvas.width,canvas.height)
context.save()  //保存当前环境的状态
//在绘制图像之前把剪辑区域设置好
setclippingRegion(clippingRegion);
    //topMargin与0比较选区最大的值
context.drawImage(image,Math.max(leftMargin,0),Math.max(topMargin,0),
Math.min(canvas.width,image.width),Math.min(canvas.height,image.height),
leftMargin<0?-leftMargin:0,topMargin<0?-topMargin:0,
Math.min(canvas.width,image.width),Math.min(canvas.height,image.height))
context.restore()//返回之前保存过的路径状态和属性
}
function reset(){
initCanvas()
$('#show-button').attr('data-id',0)
}
//function show(){  //bug:show执行完之后才能执行reset()函数 否则show函数会一直执行
// //添加动画 慢慢展开清晰图片
// var timer=setInterval(
// function(){
//      clippingRegion.r+=20//图片大小为800*600 r半径舍友1000完全足够
//      draw(image,clippingRegion)
//      if(clippingRegion.r>2*Math.max(canvas.width,canvas.height)){
//         clearInterval(timer)    
//      }
// },30)
//
//}
function show(){
$('.redpacket').show();
}
$('.redpacket').click(function(){
if($('#show-button').attr('data-id')==0){
$(this).hide();
   $('#show-button').attr('data-id',1)
   clippingRegion.r=Math.max(canvas.width,canvas.height)
   draw(image,clippingRegion)
}
})
</script>
</body>
</html>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值