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仿PHP $_GET获取URL中的参数
May 12 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jQuery HTML css()方法与css类实例详解
May 20 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 之 没有mysql支持时的替代方案
2006/10/09 PHP
php新建文件自动编号的思路与实现
2011/06/27 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
python控制台英汉汉英电子词典
2020/04/23 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
python 元组的使用方法
2020/06/09 Python
python drf各类组件的用法和作用
2021/01/12 Python
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
C语言50道问题
2014/10/23 面试题
大专生自荐信
2013/10/04 职场文书
教学改革实施方案
2014/03/31 职场文书
党课心得体会范文
2014/09/09 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
董存瑞观后感
2015/06/11 职场文书
董事长新年致辞
2015/07/29 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers