Canvas实现微信红包照片效果

本篇文章来源慕课网课程《canvas玩转红包照片》，用canvas及css3结合，实现红包照片的效果，并不做支付过程，代替的是使用2个按钮，显示清晰图片和重置圆圈可见区域。未做移动的屏幕适应

微信红包照片效果图一张模糊图片，只有鱼哥小圆圈的区域是清晰可见

原理分析：

1、先在页面放置一张原图片image，用css3的filter做模糊处理
2、在图片区域上方放置一个与图片image大小一样的canvas，放置整张清晰图片
3、通过canvas的图片剪辑方法，剪辑出一个圆圈区域，就达到了只显示一个圆圈区域的效果

代码及解析

目录结构：

>

index.html，blur.js，blur.css

index.htm页面代码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <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"/>
 <title>模糊红包效果</title>
 <link rel="stylesheet" href="css/blur.css" rel="external nofollow" />
 <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
 </head>
 <body>
 <div id="blur-div">
 <img id="blur-image" src="img/gd.jpg" />
 <canvas id="canvas"></canvas><!--大小要在js设置，不要在css设置-->
 <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="js/blur.js"></script>
 </body>
</html>

css代码blur.css

*{
 margin:0px;
 padding: 0px;
}

#blur-div{
 width:350px;
 height:220px;
 margin:0 auto;
 position: relative;

 overflow: hidden;
}

.button{
 display: block;
 position: absolute;
 z-index: 200;/*按钮在最上面*/

 width: 60px;
 height: 30px;

 color: white;
 text-decoration: none;
 text-align: center;
 line-height: 30px;

 border-radius: 2px;
}
#reset-button{
 left: 40px;
 bottom: 20px;
 background-color: #058;
}
#reset-button:hover{
 background-color: #047;
}
#show-button{
 right: 40px;
 bottom: 20px;
 background-color: #085;
}
#show-button:hover{
 background-color: #074;
}
#canvas{

 display:block;
 margin:0 auto;

 position: absolute;
 left:0px;
 top:0px;
 /*canvas在image之上，在按钮下，z-index大于image,小于btn*/
 z-index: 100;
}

#blur-image{
 display:block;
 width:350px;
 height:220px;
 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-index: 0;
}

设置canvas大小要和image大小一样

javascript代码，方法将分片段进行讲解：
初始化一些参数

var canvasWidth = window.innerWidth; //最外层div宽=窗口宽高，为了适应
var canvasHeight = window.innerHeight;

var canvas = document.getElementById("canvas");//获取到canvas元素对象
var context = canvas.getContext("2d");//获取2d context

//设置canvas大小和最外层div宽高一样
canvas.width = canvasWidth;
canvas.height = canvasHeight;

//用canvas显示清晰图像
var image = new Image();
image.src = "img/gd.jpg";

//剪辑区域
var radius = 30;//剪辑区域圆的半径
var clippingRegion;//剪辑区域对象

底层图片用css3设置过后就已经可以显示在页面上，是一张模糊过的图片，下一步就是在canvas上绘制剪辑图片

image.onload = function(e) {
 //此处js代码设置blur-div 和canvas宽高调整
 $('#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");

 initCanvas();//这是初始化canvas的方法
}
function initCanvas() {
 //重置剪辑区域，归位,随机
 clippingRegion = { //保证剪辑区域一定在有图像的地方
 x: Math.random() * (canvas.width - 2 * radius) + radius,
 y: Math.random() * (canvas.height - 2 * radius) + radius,
 r: radius
 };
 draw(image, clippingRegion);//这是绘制image的方法
}
//设置剪辑区域
function setClippingRegion(clippingRegion) {
 context.beginPath(); //创建路径
 context.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, Math.PI * 2, false); //画圆形
 context.clip();
}
function draw(image, clippingRegion) {
 context.clearRect(0, 0, canvas.width, canvas.height);
 context.save();
 //图像绘制前，确定剪辑区域
 setClippingRegion(clippingRegion);
 context.drawImage(image, 0, 0);

 context.restore();
}

点击显示按钮show，完全显示清晰图像，复用draw函数，将剪辑区域变大

function show() {
 //添加动画
 var theAnimation = setInterval(function() {
 clippingRegion.r += 20; //慢慢扩大显示
 //边界条件
 if (clippingRegion.r > 2 * Math.max(canvas.width, canvas.height)) { //停止动画，否则函数执行不停止
  clearInterval(theAnimation);
 }
 draw(image, clippingRegion);//循环执行draw方法，慢慢将剪辑区域的半径扩大，实现动画效果
 }, 30);//bug，显示之后立即点击重置，还是会打开图片，可能是因为定时器还没结束
}

重置则再次初始化canvas就行了，在initCanvas已经做了随机位置，所以每次点击重置都是随机位置的剪辑区域

//重置，initCanvas
function reset() {
 initCanvas();
}

完整blur.js代码

var canvasWidth = window.innerWidth; //最外层div宽=窗口宽高，为了适应
var canvasHeight = window.innerHeight;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

//设置canvas大小和最外层div宽高一样
canvas.width = canvasWidth;
canvas.height = canvasHeight;

//用canvas显示清晰图像
var image = new Image();
var radius = 30;
//剪辑区域
var clippingRegion;
image.src = "img/gd.jpg";

//因为图像加载需要时间，所以用onload方法，等待图片加载完成后再执行函数
image.onload = function(e) {
 //blur-div 和canvas宽高调整
 $('#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");

 initCanvas();
}

function initCanvas() {
 //重置剪辑区域，归位,随机

 clippingRegion = { //保证剪辑区域一定在有图像的地方
 x: Math.random() * (canvas.width - 2 * radius) + radius, //30-320 0-width 减掉半径30 350-30*2
 y: Math.random() * (canvas.height - 2 * radius) + radius, //30-190 0-height 减掉半径30 220-30*2
 r: radius
 };
 draw(image, clippingRegion);
}

//设置剪辑区域
function setClippingRegion(clippingRegion) {
 context.beginPath(); //创建路径
 context.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, Math.PI * 2, false); //画圆形
 context.clip();
}

function draw(image, clippingRegion) {
 context.clearRect(0, 0, canvas.width, canvas.height);

 context.save();
 //图像绘制前，确定剪辑区域
 setClippingRegion(clippingRegion);

 context.drawImage(image, 0, 0); //图片大于canvas

 context.restore();
}

//完全显示清晰图像，复用draw函数，将剪辑区域变大
function show() {
 //添加动画,此函数有缺点
 clippingRegion.r=radius;//给半径归位
 var theAnimation = setInterval(function() {
 console.log("anima");
 clippingRegion.r += 20; //慢慢扩大显示
 //边界条件
 if (clippingRegion.r > 2 * Math.max(canvas.width, canvas.height)) { //停止动画，否则函数执行不停止1000
  clearInterval(theAnimation);
 }
 draw(image, clippingRegion);
 }, 30);
}

//重置，initCanvas
function reset() {
 initCanvas();
}

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

赞 (0)

相关推荐

  • canvas红包照片实例分享

    canvas红包照片实例分享

    效果: 点击RESET:随机显示剪辑区域: 点击SHOW:显示完整清晰图片: 图(1)点击RESET 图(2)点击SHOW 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas红包照片</title> <script type="text/javascript" src="https://

  • js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能

    js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能

    最近支付宝的领红包可真是刷爆了各个微信群啊,满群都是支付宝口令. 可是这样推广可不是办法,又要复制又要打开支付宝又要点领取,太麻烦了. 于是乎,提出了一个疑问! 是否可以在微信里面点一个链接然后直接打开支付宝并自动领取呢??? 就像下面这样! 上图解说: 1.点击一个url 2.立即跳转到支付宝APP 3.并且秒领红包 对,没错,上面就是本次案例的demo 大家可以扫码体验: 实现的原理很简单 源码只有一个html文件和js文件 html只要是方便加载js index.html <!DOCTYP

  • js canvas实现红包照片效果

    js canvas实现红包照片效果

    今天跟着学习了一个制作红包照片类似功能的demo,很有意思,所以在这里分享代码给大家,可以直接使用. 先贴出效果图大家看一下: 点击重置后会以随机一个点为圆心生成半径为50px的圆,然后显示清晰的图像: 点击显示后会全部显示清晰的图像: 功能虽然很少,但是很有意思不是吗,而且做好了适配可以在不同分辨率大小的设备上都可以玩. 只需要js+css+html就可以实现,不过需要引入jquery 下面po出完整代码: demo.html: <!DOCTYPE HTML> <html> &l

  • js仿微信抢红包功能

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿微信抢红包</title> <style> html,body,div{margin:0;padding:0;} body{background:#EAEAEA;font:16px/1.8 &quo

  • 基于JavaScript实现微信抢红包功能

    金额随机:额度在0.01和(剩余平均值*2)之间. /** * 抢红包 * @param {[number]} totalAmount [总金额] * @param {[number]} totalPeople [总人数] * @return {[Array]} [每个人抢到的金额] */ function assign(totalAmount, totalPeople){ var remainAmount = +totalAmount; var remainPeople = +totalPeo

  • JavaScript实现微信红包算法及问题解决方法

    专栏停更了很久,向大家说声抱歉.今天的主题是使用JavaScript模拟实现微信抢红包的算法.这个题目看起来很简单,不就是一个随机函数吗?我们一起实现看看. 我们假设有一个100元的红包,要发给10个人.为了保证公平,算法需要保证以下的原则: 每个人最少能抢到0.01元 每个人的机会平等 所有人的金额之和等于100元 1.简单的随机函数实现 很多朋友的一般思路是: 第一步:从0-100中随机一个数,得到第一个红包金额. 第二步:从0-剩余金额中随机一个数,得到第二个红包金额. 第三步:... 最

  • Canvas实现微信红包照片效果

    本篇文章来源慕课网课程<canvas玩转红包照片>,用canvas及css3结合,实现红包照片的效果,并不做支付过程,代替的是使用2个按钮,显示清晰图片和重置圆圈可见区域.未做移动的屏幕适应 微信红包照片效果图一张模糊图片,只有鱼哥小圆圈的区域是清晰可见 原理分析: 1.先在页面放置一张原图片image,用css3的filter做模糊处理 2.在图片区域上方放置一个与图片image大小一样的canvas,放置整张清晰图片 3.通过canvas的图片剪辑方法,剪辑出一个圆圈区域,就达到了只显示一

  • Flutter利用Canvas模拟实现微信红包领取效果

    Flutter利用Canvas模拟实现微信红包领取效果

    目录 前言 效果 红包弹出 红包布局 上半部分 下半部分 金币绘制 金币文字绘制 头像和文字 金币旋转 红包开启 结果弹出 前言 前面写了一篇Flutter利用Canvas绘制精美表盘效果详解的文章,对 Flutter 中的 Canvas 使用有了进一步的理解,就想着再用 Canvas 实现一个什么样的效果来加深一下对 Canvas 使用的理解,这个时候正好看到群里有人发红包,于是就想着能不能在 Flutter 中使用 Canvas 实现微信领取红包的效果?想到就做,知行合一,经过几天空余时间的

  • Android仿硬币转动微信红包动画效果

    Android仿硬币转动微信红包动画效果

    项目需要研究了一下微信红包动画,即硬币转动的效果,原理其实就是三张不同角度的图片利用AnimationDrawable帧动画进行播放,在参考了案例之后,给自己记录一下完成的过程. 1,在XML文件中定义动画: 步骤如下: ①新建 Android 项目 ②在drawable目录中新建一个anim.xml(注意文件名小写) <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:andr

  • Android仿打开微信红包动画效果实现代码

    首先看下效果: 实现原理: 准备3张不同角度的图片,通过AnimationDrawable帧动画进行播放即可 代码实现: 1.编写动画xml文件: <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false&

  • 微信小程序基于canvas渐变实现的彩虹效果示例

    微信小程序基于canvas渐变实现的彩虹效果示例

    本文实例讲述了微信小程序基于canvas渐变实现的彩虹效果.分享给大家供大家参考,具体如下: 微信小程序提供了两种渐变的方式: createLinearGradient(x,y,x1,y1)创建一个线性的渐变. x,y           起点坐标 x1,y1        终点坐标 createCircularGradient(x,y,r)创建一个从圆心开始的渐变. x,y            圆心坐标 r                 半径 创建了渐变对象之后,必须添加两个或者两个以上的

  • 解密朋友圈红包照片功能

    昨天大家是不是都被微信朋友圈的毛玻璃图片刷屏了?这是微信为新春红包准备的一个新的功能,昨天内测了一段时间,传播效应很大,这告诉我们一个道理:没钱,以后连朋友圈都看不了.这功能刚推出大家都在忙着发红包照片的时候,身为程序员天生的敏感,稍微研究了下如何不花钱就能查看,并且第一时间发布在我朋友圈里,今天就给大家分享下,这个技能可谓是Android开发必备哦. 先来回答大家的一个困惑,就是微信这功能怎么做出来的,好神奇啊,这功能说上线就上线,说下线就下线,不少人猜测到底是用了什么神奇的技术实现的,用了传

  • 利用HTML5的画布Canvas实现刮刮卡效果

    利用HTML5的画布Canvas实现刮刮卡效果

    先给大家展示效果: 查看演示   源码下载 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮卡效果. HTML 我们只需要在页面中加入canvas标签元素,其他的就看

  • Android实现好看的微信聊天气泡效果

    Android实现好看的微信聊天气泡效果

    目录 前言 代码实现 踩坑记录 总结 前言 在聊天类应用中,通常用气泡作为聊天内容的背景色,比如微信的聊天背景,别人发过来的是白色的气泡,自己发的是绿色的气泡. 上面这种是比较普通的,这篇我们玩点有趣的,让聊天气泡是渐变色的.可能很多人会觉得渐变很简单,给 Container 来个decoration或者使用 DecoratedBox,使用渐变填充色就可以了,比如下面这种效果: 这个感觉也太丑了,本篇我们来一个高级的 —— 整个聊天窗口的气泡颜色是渐变的,而且随着滚动还会变化!先看看实现的效果,

随机推荐