首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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

js canvas实现红包照片效果

- Author -

yesz12358

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
如何用JavaScript定义一个类
Sep 12 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
使用vue构建一个上传图片表单
Jul 04 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
@angular前端项目代码优化之构建Api Tree的方法
Dec 24 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
javascript中的this作用域详解
Jul 15 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
Ajax是什么？Ajax高级用法之Axios技术
Apr 21 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
索尼ICF-36(1) mediapipe(1) 贪吃蛇(2) SnakeGame(1) 备份(2) 德生2P3(1) python小游戏(5) 计算机视觉(2) 全局锁(1) 索引(8)
You might like
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
jQuery html()等方法介绍
2009/11/18 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
喜大普奔！jQuery发布 3.0 最终版
2016/06/12 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
python实现图书管理系统
2018/03/12 Python
Python 字符串与数字输出方法
2018/07/16 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
python遍历文件目录、批量处理同类文件
2019/08/31 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
幼儿园教师自我鉴定
2014/03/20 职场文书
银行资信证明
2015/06/17 职场文书
2019年怎样写好导游词？
2019/07/02 职场文书