js canvas实现红包照片效果
时间:2018-08-21
这篇文章主要介绍了js canvas实现红包照片效果
今天跟着学习了一个制作红包照片类似功能的demo,很有意思,所以在这里分享代码给大家,可以直接使用。
先贴出效果图大家看一下:
点击重置后会以随机一个点为圆心生成半径为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() });*/
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- python学习笔记之初识Python
- 从APK解密到批量获取他人信息
- React native和原生之间的通信
- 移动云存储服务平台Parse下的iOS安全分析
- 经典算法学习之回溯法
- 渗透测试系统BackBox Linux 4.1发布
- CMS漏洞检测工具 - CMSmap
- 基因组分析中多物种同源基因的鉴定和筛选
- SpringMVC类型转换器、属性编辑器PropertiesEditor源码分析CustomDateEditor源码分析TypeConverterDelegate源码分析
- Intellij IDEA 插件开发之自建插件仓库
- 空Word文档附件:绕过垃圾邮件过滤的新方法
- SpringMVC基本使用关于DisptacherServlet关于ServletContainerInitializer最简单配置接收参数路径变量表单变量
- 测序数据可视化 (一)
- Android log日志
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 爬虫小白:03.requests的使用
- Oracle GoldenGate 19 Microservices数据同步实战与故障处理
- 给“小白”漫画+图示讲解MyBatis原理,就问香不香!
- webClientTest 编写单元测试类
- 关于gorm多表联合查询(left join)的小记
- UnicodeEncodeError: 'latin-1' codec can't encode character 'u2026' in position 30: ordinal not i...
- Oracle GoldenGate 19 Microservices完整高可用安装、配置与测试
- 爬虫小白:11.scrapy框架(六) _媒体管道
- R基于TCGA数据画生存曲线
- 爬虫小白:01-认识爬虫
- 04.BeautifulSoup使用
- 04.Xpath的使用
- 微服务[学成在线] day14:媒资管理
- Pandas 数据结构
- 微服务[学成在线] day15:媒资管理系统集成