Canvas实现微信红包照片效果


Posted in Javascript onAugust 21, 2018

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

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

Canvas实现微信红包照片效果

原理分析:

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

代码及解析

目录结构:

>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();
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
JavaScript使用技巧精萃[代码非常实用]
Nov 21 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 Javascript
jquery+Jscex打造游戏力度条
Sep 12 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
Vue开发实现吸顶效果的示例代码
Aug 21 #Javascript
js canvas实现红包照片效果
Aug 21 #Javascript
js实现简单选项卡功能
Mar 23 #Javascript
js实现轮播图的完整代码
Oct 26 #Javascript
JQuery扩展对象方法操作示例
Aug 21 #jQuery
详解Vue结合后台的列表增删改案例
Aug 21 #Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 #Javascript
You might like
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
javascript IFrame 强制刷新代码
2009/07/23 Javascript
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
详解NodeJs开发微信公众号
2018/05/25 NodeJs
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
python决策树之CART分类回归树详解
2017/12/20 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
银行出纳岗位职责
2013/11/25 职场文书
社区中秋节活动方案
2014/01/29 职场文书
带薪年假请假条
2014/02/04 职场文书
股指期货心得体会
2014/09/10 职场文书
神农溪导游词
2015/02/11 职场文书
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python