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 相关文章推荐
Prototype Number对象 学习
Jul 19 Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
微信小程序实现批量倒计时功能
Nov 01 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 Javascript
详解本地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
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
JS 对象介绍
2010/01/20 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
angular.bind使用心得
2015/10/26 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
Python常见文件操作的函数示例代码
2011/11/15 Python
极简的Python入门指引
2015/04/01 Python
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
python如何实现递归转非递归
2021/02/25 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
大韩航空官方网站:Korean Air
2017/10/25 全球购物
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
函授自我鉴定
2013/11/06 职场文书
酒吧创业计划书
2014/01/18 职场文书
父母对孩子说的话
2014/04/12 职场文书
文科毕业生自荐书范文
2014/04/17 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
Python实现socket库网络通信套接字
2021/06/04 Python