js canvas实现红包照片效果


Posted in Javascript onAugust 21, 2018

今天跟着学习了一个制作红包照片类似功能的demo,很有意思,所以在这里分享代码给大家,可以直接使用。

先贴出效果图大家看一下:

js canvas实现红包照片效果

点击重置后会以随机一个点为圆心生成半径为50px的圆,然后显示清晰的图像;

点击显示后会全部显示清晰的图像;

功能虽然很少,但是很有意思不是吗,而且做好了适配可以在不同分辨率大小的设备上都可以玩。

只需要js+css+html就可以实现,不过需要引入jquery

下面po出完整代码:

demo.html:

<!DOCTYPE HTML>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Canvas玩儿转红包照片</title>
<script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>
<link href="img.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<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"/>
 
</head>
 
<body>
 
<div id="blur-div">
 <img src="images/1.jpg" id="blur-image">
 <canvas id="canvas">
 </canvas>
 <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="img.js"></script>
</body>
</html>

img.css:

*{
 margin: 0 0;
 padding: 0 0;
}
 
#blur-div{
/* width: 800px;
 height: 500px;*/
 margin: 0 auto;
 position: relative;
 /*超过部分隐藏*/
 overflow: hidden;
}
 
#blur-image {
 display: block;
 /*width: 800px;
 height: 500px;*/
 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轴上的值*/
 z-index: 0;
}
 
#canvas{
 display: block;
 margin: 0 auto;
 
 position: absolute;
 left: 0px;
 top: 0px;
 
 z-index: 100;
 
} 
 
.button{
 display: block;
 position: absolute;
 z-index: 200;
 
 width: 100px;
 height: 30px;
 
 color: white;
 text-decoration: none;
 text-align: center;
 line-height: 30px;
 
 border-radius: 5px;
 
}
 
#reset-button{
 left: 50px;
 bottom: 20px;
 background-color: #058;
}
 
#reset-button:hover{
 background-color: #047;
}
 
#show-button{
 right: 50px;
 bottom: 20px;
 background-color: #085;
}
 
#show-button:hover{
 background-color: #074;
}

img.js:

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 radius = 50
 
var image = new Image()
var clippingRegion = {x:-1,y:-1,r:radius}
 
var leftMargin = 0, topMargin=0
 
var a;
 
image.src = "images/1.jpg"
image.onload = function(e){
 
 $("#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")
 
 leftMargin = (image.width - canvas.width) / 2
 topMargin = (image.height - canvas.height) / 2
 
 $("#blur-image").css("top", "-" + topMargin + "px")
 $("#blur-image").css("left", "-" + leftMargin + "px")
 
 initCanvas()
}
 
function initCanvas(){
 
 clearInterval(a)
 clippingRegion = {x:Math.random()*(canvas.width-2*radius)+radius,y:Math.random()*(canvas.height-2*radius)+radius,r:radius}
 console.log(canvas.width);
 console.log(canvas.height);
 clippingRegion.r = 0;
 var id = setInterval(
 function(){
  clippingRegion.r += 2;
  if(clippingRegion.r > 50){
  clearInterval(id)
  }
  draw(image,clippingRegion)
 },
 30
 )
 
}
 
function setClippingRegion(clippingRegion){
 /*创建剪辑区域的路径*/
 context.beginPath()
 /*第六个参数表示是顺时针还是逆时针绘制*/
 context.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, Math.PI*2, false)
 /*希望路径是个剪辑区域调用此方法*/
 context.clip()
}
 
function draw(image ,clippingRegion){
 
 /*每次绘制之前,对canvas的内容进行清空*/
 context.clearRect(0,0,canvas.width,canvas.height)
 /*存储canvas的当前状态*/
 context.save()
 /*剪辑出一个圆形的区域*/
 setClippingRegion(clippingRegion)
 /*开始画*/
 //context.drawImage(image, 0 , 0)
 /*leftMargin, topMargin, canvas.width, canvas.height表示image剪出这么大
 0, 0, canvas.width, canvas.height 表示canvas的大小
 */
 context.drawImage(image, 
 leftMargin, topMargin, canvas.width, canvas.height,
 0, 0, canvas.width, canvas.height)
 /*canvas的状态恢复*/
 context.restore()
}
 
function reset(){
 initCanvas();
}
 
function show(){
 
 /*此函数是内置函数,表示每隔多少秒就执行前面的函数 所以第一个参数是函数,后面是间隔时间*/
 var id = setInterval(
 function(){
  a = id;
  clippingRegion.r += 20
  
  if(clippingRegion.r > 2*Math.max(canvas.width,canvas.height)){
  /*用来关闭函数执行的*/
  clearInterval(id);
  }
  draw(image ,clippingRegion)
  
 },
 30
 
 )
}
 
/*阻止滑动操作*/
/*canvas.addEventListener("touchstart",function(e){
 e.preventDefault()
});*/

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

Javascript 相关文章推荐
PHP PDO操作总结
Nov 17 Javascript
js格式化时间的方法
Dec 18 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
几种响应式文字详解
May 19 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 Javascript
js实现简单选项卡功能
Mar 23 #Javascript
js实现轮播图的完整代码
Oct 26 #Javascript
JQuery扩展对象方法操作示例
Aug 21 #jQuery
详解Vue结合后台的列表增删改案例
Aug 21 #Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 #Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 #Javascript
小程序开发基础之view视图容器
Aug 21 #Javascript
You might like
CI(CodeIgniter)框架介绍
2014/06/09 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
Python Web开发模板引擎优缺点总结
2014/05/06 Python
Python heapq使用详解及实例代码
2017/01/25 Python
对Python3 序列解包详解
2019/02/16 Python
virtualenv介绍及简明教程
2020/06/23 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
个人简历自我鉴定
2013/10/11 职场文书
股权转让意向书
2014/04/01 职场文书
收入证明怎么写
2015/06/12 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
python playwright 自动等待和断言详解
2021/11/27 Python
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript