canvas--微信红包效果

最新推荐文章于 2024-06-13 14:30:20 发布
最新推荐文章于 2024-06-13 14:30:20 发布
阅读量1k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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"> <!--使用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>

小水91
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas红包雨
u013258556的博客
10-16 1755
类似红包雨坠落效果 要做功能只要监听屏幕有没有被点击就行这样实现比较简单 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> #canvas ...
Canvas实现微信红包照片效果
Cooky的博客
12-10 3193
本篇文章来源慕课网课程《canvas玩转红包照片》，用canvas及css3结合，实现红包照片的效果，并不做支付过程，代替的是使用2个按钮，显示清晰图片和重置圆圈可见区域。未做移动的屏幕适应微信红包照片效果图原理分析： 先在页面放置一张原图片image，用css3的filter做模糊处理 在图片区域上方放置一个与图片image大小一样的canvas，放置整张清晰图片 通过canvas的图片剪辑方法，
vue3实战练习之红包雨，抢红包案例
最新发布
2301_79810514的博客
06-13 313
每当618消费节到来时，某宝、某多，等购物网站都会退出各种活动，其中抢红包，优惠券等红包雨活动很是火热，于是就通过vue的知识来做一个红包雨，抢红包加分活动！代码中红包的路径改成自己存放红包图片的路径即可。当点击红包时，红包会消失，同时得分加一。
js canvas实现红包照片效果
12-10
今天跟着学习了一个制作红包照片类似功能的demo，很有意思，所以在这里分享代码给大家，可以直接使用。 先贴出效果图大家看一下： 点击重置后会以随机一个点为圆心生成半径为50px的圆，然后显示清晰的图像； 点击显示后会全部显示清晰的图像； 功能虽然很少，但是很有意思不是吗，而且做好了适配可以在不同分辨率大小的设备上都可以玩。 只需要js+css+html就可以实现，不过需要引入jquery 下面po出完整代码： demo.html: <!DOCTYPE HTML> <html> <head lang="en"> <meta http-equiv="Content-Type" content
简单的实现微信领取红包界面，按钮旋转动画效果。
lixuce1234的博客
07-21 7841
最近在做一下项目，是领取红包的，我们这里仿照的微信的红包领取界面，点击按钮之后立体旋转，然后打开红包： 我这里用的是旋转动画，然后沿着Y轴去旋转，说了这么多，下面来看一下效果： 现在清楚多了把 ，我用自定义了一个动画，找到控件的中心，然后让中心沿着Y轴去旋转，不多说了看代码吧： package com.lixuce.myapplication; import and
微信小程序实现红包雨功能
10-18
在微信小程序中实现红包雨是一项技术挑战，因为与Web页面相比，小程序在处理动态效果时有一些特殊的限制。本篇将详细介绍如何在微信小程序中实现这个趣味互动功能。 1. **需求分析** - **随机位置**：红包应随机...
5.1 Canvas实现仿微信红包照片功能配移动端｜canvas项目综合实战｜Canvas图形、动画、游戏开发从入门到精通全系列课程
08-31
5.1_Canvas实现仿微信红包照片功能配移动端｜canvas项目综合实战｜Canvas图形、动画、游戏开发从入门到精通全系列
html5 canvas仿微信朋友圈讨红包看照片效果
06-11
在这个项目中，“html5 canvas仿微信朋友圈讨红包看照片效果”是利用Canvas API模仿了微信朋友圈中一种特殊的红包玩法，即用户需要发送红包才能查看朋友分享的照片。这种效果增加了互动性和趣味性，提高了用户的参与...
HTML5微信红包抽奖红包雨特效动画js效果.rar
07-09
在这个名为"HTML5微信红包抽奖红包雨特效动画js效果.rar"的压缩包中，包含了一个利用HTML5、JavaScript以及可能的CSS3技术实现的微信红包抽奖动画效果。这个效果模拟了现实中红包雨的场景，为用户带来了生动有趣的...
微信小程序打开红包的css_微信小程序实现发红包功能
weixin_34556619的博客
12-23 1229
本文实例为大家分享了微信小程序实现发红包的具体代码，供大家参考，具体内容如下目前此功能尚在内测，无法申请。此博文仅示例。流程效果图：图片1触发wx.sendBizRedPacket({})吊起图片2，点击开，出现图片3，关闭以后出现图片4。wx.sendBizRedPacket({})说明及示例：wx.sendBizRedPacket({timeStamp: e.timeStamp,nonceSt...
h5+canvas打开红包获得流量
09-14
简单实用的H5+Canvas制作的打开红包页面，拥有简单的动画及打开红包过度效果
vue移动端实现红包雨效果
10-18
主要为大家详细介绍了vue移动端实现红包雨效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
仿微信红包打开特效，3D图片翻转
11-07
仿微信抢红包打开特效3D图片翻转
Canvas 代码雨，像下雨一样
07-03
用canvas制作，让代码像下雨一样，下啊、下啊、下啊。
基于htm5 canvas打开手机红包动画源码
10-24
背景是html5 canvas转动辐射条 ，红包弹出和文字、头像采用css3动画效果。
使用canvas做出红包照片的效果
iteye_8081的博客
08-10 439
今天跟着学习了一个制作红包照片类似功能的demo，很有意思，所以在这里分享代码给大家，可以直接使用。 先贴出效果图大家看一下： 点击重置后会以随机一个点为圆心生成半径为50px的圆，然后显示清晰的图像； 点击显示后会全部显示清晰的图像； 功能虽然很少，但是很有意思不是吗，而且做好了适配可以在不同分辨率大小的设备上都可以玩。 只需要js+css+html就可以实现，不过需要引入jque...
Canvas模仿微信红包照片
寂寞的博客
01-30 2060
1.最终效果：2.实现过程：1.将图片加载出来，并加上模糊效果： index.html:<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-2.2.0.min.js"></script> <link href="image
模拟微信红包效果
wfly blog
06-15 1199
代码已上传至github github代码地址：https://github.com/Miofly/mio.git <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-wi.
ec-canvas在微信开发者工具中
07-28
为了解决这个问题，可以在wxml的canvas标签中添加一个属性：force-use-old-canvas="true"。这样可以强制使用旧的canvas，从而解决滚动问题。另外，还可以通过修改ec-canvas.js文件中的isUseNewCanvas属性值为true来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值