canvas--微信红包效果

最新推荐文章于 2023-02-21 20:13:47 发布

小水91

最新推荐文章于 2023-02-21 20:13:47 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/lsy__lsy/article/details/80359853

版权

示例：

<!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"> 
<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>