canvas红包照片实例分享


Posted in Javascript onFebruary 28, 2017

效果:

点击RESET:随机显示剪辑区域;

点击SHOW:显示完整清晰图片;

canvas红包照片实例分享

图(1)点击RESET

canvas红包照片实例分享

图(2)点击SHOW

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas红包照片</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
 #blur_div{
 width: 500px;
 height: 334px;
 margin: 0 auto;
 position: relative;
 margin-top:100px;
 }
 #blur_img{
 display: block;
 width: 500px;
 height: 334px;
 margin: 0 auto;
 filter: blur(15px);/*CSS3模糊*/
 -webkit-filter: blur(15px);
 -moz-filter: blur(15px);
 -ms-filter: blur(15px);
 -o-filter: blur(15px);
 position:absolute;
 left: 0px;
 top: 0px;
 z-index: 0;
 }
 #canvas{
 display: block;
 margin: 0 auto;
 position:absolute;
 left: 0px;
 top: 0px;
 z-index: 100;
/* background-color:red;*/
 }
 .button{
 display:block;
 position:absolute;
 z-index:200;
 width:80px;
 height:30px;
 color:white;
 text-decoration:none;
 text-align:center;
 line-height:30px;
 border-radius:5px;
 }
 #reset_button{
 left:100px;
 bottom:20px;
 background-color:#058;
 }
 #reset_button:hover{
 background-color:#047;
 }
 #show_button{
 right:100px;
 bottom:20px;
 background-color:#085;
 }
 #show_button:hover{
 background-color:#074;
 }
</style>
</head>
<body>
 <div id="blur_div">
 <img id="blur_img" src="http://cdn.attach.qdfuns.com/notes/pics/201702/27/221935e35ugwllljg10912.jpg" />
  <canvas id="canvas"></canvas>
  <a href="javascript:reset()" rel="external nofollow" class="button" id="reset_button">RESET</a>
  <a href="javascript:show()" rel="external nofollow" class="button" id="show_button">SHOW</a>
  </div>
 <script>
   var canvasWidth = 500;
 var canvasHeight = 334;
 var canvas = document.getElementById("canvas");
 var context = canvas.getContext("2d");
 canvas.width = canvasWidth;
 canvas.height = canvasHeight;
 /*在canvas上绘制清晰的图片*/
 var image = new Image();
 var radius = 40;
 var clippingRegion = {x:-1,y:-1,r:radius};/*初始化剪辑区域*/
 image.src = "http://cdn.attach.qdfuns.com/notes/pics/201702/27/221935e35ugwllljg10912.jpg";
 image.onload = function(e){
  initCanvas();
 }
 function initCanvas(){
  clippingRegion = {x:Math.random()*(canvas.width-2*radius)+radius,
     y:Math.random()*(canvas.height-2*radius)+radius,
     r:radius};/*随机剪辑区域*/
  draw(image,clippingRegion);
 }
 function setClippingRegion(clippingRegion){
  context.beginPath();
  context.arc(clippingRegion.x,clippingRegion.y,clippingRegion.r,0,2*Math.PI,false);/*绘制剪辑区域的路径*/
  context.clip();
 }
 function draw(image,clippingRegion){
  context.clearRect(0,0,canvas.width,canvas.height);/*清除画布*/
  context.save();
  setClippingRegion(clippingRegion);/*重新设置剪辑区域*/
  context.drawImage(image,0,0);
  context.restore();
 }
 /*重置显示剪辑区域*/
 function reset(){
  initCanvas();
 }
 /*显示整个清晰图片*/
 function show(){
  var theAnimation = setInterval( 
  function(){
   clippingRegion.r += 20; 
   if(clippingRegion.r>2*Math.max(canvas.width,canvas.height)){
   clearInterval(theAnimation);
   }
   draw(image,clippingRegion);
  },20)
 }  
  </script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
一个简单的javascript类定义例子
Sep 12 Javascript
javascript 年月日联动实现核心代码
Dec 21 Javascript
js模仿jquery的写法示例代码
Jun 16 Javascript
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 #Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 #Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 #Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 #Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 #Javascript
canvas绘图不清晰的解决方案
Feb 28 #Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 #Javascript
You might like
PHP下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
php设计模式 Delegation(委托模式)
2011/06/26 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
PHP进程通信基础之信号
2017/02/19 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
javascript concat数组累加 示例
2009/09/03 Javascript
ExtJS下grid的一些属性说明
2009/12/13 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
python 创建一维的0向量实例
2019/12/02 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
大学生入党自我鉴定
2013/10/31 职场文书
物理专业本科生自荐信
2014/01/30 职场文书
自行车广告词大全
2014/03/21 职场文书
禁烟标语大全
2014/06/11 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
停电调休通知
2015/04/16 职场文书
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS
python 爬取吉首大学网站成绩单
2021/06/02 Python