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 相关文章推荐
在视频前插入广告
Nov 20 Javascript
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
May 12 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
详解puppeteer使用代理
Dec 27 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
May 22 Javascript
vue实现短信验证码输入框
Apr 17 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
10条php编程小技巧
2015/07/07 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
Python Matplotlib库入门指南
2015/05/18 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
python处理数据,存进hive表的方法
2018/07/04 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
银行职业规划书范文
2013/12/28 职场文书
自我评价范文分享
2014/01/04 职场文书
高一数学教学反思
2016/02/18 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书