使用canvas做出红包照片的效果
来源:互联网 发布:美国黑人矛盾 知乎 编辑:程序博客网 时间:2024/05/08 22:42
今天跟着学习了一个制作红包照片类似功能的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="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()" class="button" id="reset-button"> 重置 </a><a href="javascript:show()" 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.innerWidthvar canvasHeight = window.innerHeightvar canvas = document.getElementById("canvas")var context = canvas.getContext("2d")canvas.width=canvasWidthcanvas.height=canvasHeightvar radius = 50var image = new Image()var clippingRegion = {x:-1,y:-1,r:radius}var leftMargin = 0, topMargin=0var 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) / 2topMargin = (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 += 20if(clippingRegion.r > 2*Math.max(canvas.width,canvas.height)){/*用来关闭函数执行的*/clearInterval(id);}draw(image ,clippingRegion)},30)}/*阻止滑动操作*//*canvas.addEventListener("touchstart",function(e){e.preventDefault()});*/
0 0
- 使用canvas做出红包照片的效果
- Canvas实现微信红包照片效果
- 【html5 canvas】使用Canvas做出橡皮擦效果
- 做出一个SwitchButton的效果,并详细学习一下onDraw(Canvas canvas)方法的使用
- javascript结合canvas标签做出来的时钟效果
- Canvas模仿微信红包照片
- 使用popupWinow做出底部弹出菜单的效果
- 微信红包照片的揭秘
- canvas标签结合javascript做出动态时钟效果
- 怎样才能做出这样的效果?
- Canvas的实际使用--自定义搜索效果
- ImageView使用一张图片做出selector效果,控件点击出现波纹效果,友好的交互。
- 使用JS做出遮罩效果
- unity3d 使用Instantiate功能做出子彈發射效果
- 使用Gallery做出图片层叠效果
- 使用js做出弹窗效果
- 如何使用layer-list做出阴影效果
- 什么样的配置做出什么样的效果
- QT间进程通信之共享内存
- 检测网络
- CentOS 6.5 下安装MySQL 5.7.12
- sql注入详解
- Java并发编程(二)多线程编程
- 使用canvas做出红包照片的效果
- maven install 失败
- HDU1251 统计难题
- opencv 鼠标响应机制 onMouse()函数的理解
- spring-oauth
- Ruby 中数组的常用操作
- jQuery语法基础
- 静态内部类解决静态变量注入问题
- picasso-强大的Android图片下载缓存库