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 相关文章推荐
js png图片(有含有透明)在IE6中为什么不透明了
Feb 07 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
vue data引入本地图片的两种方式小结
Nov 13 Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
python中sys.argv参数用法实例分析
2015/05/20 Python
python web框架学习笔记
2016/05/03 Python
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
使用Python写CUDA程序的方法
2017/03/27 Python
Python 自动化表单提交实例代码
2017/06/08 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
Python tcp传输代码实例解析
2020/03/18 Python
python解释器安装教程的方法步骤
2020/07/02 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
大学生找工作推荐信范文
2013/11/28 职场文书
成品仓管员岗位职责
2013/12/11 职场文书
仓库班组长岗位职责
2013/12/12 职场文书
社会学专业求职信
2014/02/24 职场文书
Python标准库之typing的用法(类型标注)
2021/06/02 Python
mysql如何查询连续记录
2022/05/11 MySQL