canvas红包照片实例分享

效果:

点击RESET：随机显示剪辑区域；

点击SHOW：显示完整清晰图片；

图（1）点击RESET

图（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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • 解密朋友圈红包照片功能

    昨天大家是不是都被微信朋友圈的毛玻璃图片刷屏了?这是微信为新春红包准备的一个新的功能,昨天内测了一段时间,传播效应很大,这告诉我们一个道理:没钱,以后连朋友圈都看不了.这功能刚推出大家都在忙着发红包照片的时候,身为程序员天生的敏感,稍微研究了下如何不花钱就能查看,并且第一时间发布在我朋友圈里,今天就给大家分享下,这个技能可谓是Android开发必备哦. 先来回答大家的一个困惑,就是微信这功能怎么做出来的,好神奇啊,这功能说上线就上线,说下线就下线,不少人猜测到底是用了什么神奇的技术实现的,用了传

  • canvas红包照片实例分享

    canvas红包照片实例分享

    效果: 点击RESET:随机显示剪辑区域: 点击SHOW:显示完整清晰图片: 图(1)点击RESET 图(2)点击SHOW 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas红包照片</title> <script type="text/javascript" src="https://

  • js canvas实现红包照片效果

    js canvas实现红包照片效果

    今天跟着学习了一个制作红包照片类似功能的demo,很有意思,所以在这里分享代码给大家,可以直接使用. 先贴出效果图大家看一下: 点击重置后会以随机一个点为圆心生成半径为50px的圆,然后显示清晰的图像: 点击显示后会全部显示清晰的图像: 功能虽然很少,但是很有意思不是吗,而且做好了适配可以在不同分辨率大小的设备上都可以玩. 只需要js+css+html就可以实现,不过需要引入jquery 下面po出完整代码: demo.html: <!DOCTYPE HTML> <html> &l

  • Canvas实现微信红包照片效果

    本篇文章来源慕课网课程<canvas玩转红包照片>,用canvas及css3结合,实现红包照片的效果,并不做支付过程,代替的是使用2个按钮,显示清晰图片和重置圆圈可见区域.未做移动的屏幕适应 微信红包照片效果图一张模糊图片,只有鱼哥小圆圈的区域是清晰可见 原理分析: 1.先在页面放置一张原图片image,用css3的filter做模糊处理 2.在图片区域上方放置一个与图片image大小一样的canvas,放置整张清晰图片 3.通过canvas的图片剪辑方法,剪辑出一个圆圈区域,就达到了只显示一

  • Python tkinter库绘图实例分享

    Python tkinter库绘图实例分享

    目录 一.小房子绘制 二.彩色气泡动画绘制 三.画布创建 一.小房子绘制 实例代码: # coding=utf-8 import tkinter as tk      # 导入tkinter模块   root = tk.Tk()            # 创建一个顶级窗口 root.title('小房子1')     # 设置标题 canvas = tk.Canvas(root, bg='white', width=700, height=700)   # 在root窗口上创建画布canvas,

  • Spring集成MyBatis完整实例(分享)

    Spring集成MyBatis完整实例(分享)

    为了梳理前面学习的<Spring整合MyBatis(Maven+MySQL)一>与<Spring整合MyBatis(Maven+MySQL)二>中的内容,准备做一个完整的示例完成一个简单的图书管理功能,主要使用到的技术包含Spring.MyBatis.Maven与MySQL等.最后的运行效果如下: 项目结构如下: 一.新建一个基于Maven的Web项目 1.1.创建一个简单的Maven项目,项目信息如下: 1.2.修改层面信息,在项目上右键选择属性,再选择"Project

  • php写app接口并返回json数据的实例(分享)

    第一步:conn.PHP文件,用于连接数据库并定义接口格式,代码如下: <?php header("charset=utf-8"); $servername="localhost"; $username="root"; $password="root"; $dbname="test"; $conn = mysql_connect($servername,$username,$password); if

  • Python爬虫DOTA排行榜爬取实例(分享)

    Python爬虫DOTA排行榜爬取实例(分享)

    1.分析网站 打开开发者工具,我们观察到排行榜的数据并没有在doc里 doc文档 在Javascript里我么可以看到下面代码: ajax的post方法异步请求数据 在 XHR一栏里,我们找到所请求的数据 json存储的数据 请求字段为: post请求字段 2.伪装浏览器,并将json数据存入excel里面 获取信息 将数据保存到excel中 3.结果展示 以上这篇Python爬虫DOTA排行榜爬取实例(分享)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 免费手机号码归属地API查询接口和PHP使用实例分享

    免费手机号码归属地API查询接口和PHP使用实例分享 最近在做全国性的行业分类信息网站,需要用到手机号归属地显示功能,于是就穿梭于各大权威站点之间偷来了API的接口地址. 分享出来,大家可以用到就拿去呵. 一.淘宝网API 复制代码 代码如下: API地址: http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=15850781443 参数: tel:手机号码 返回:JSON 二.拍拍API 复制代码 代码如下: API地址: http

  • nodeJS实现简单网页爬虫功能的实例(分享)

    nodeJS实现简单网页爬虫功能的实例(分享)

    本文将使用nodeJS实现一个简单的网页爬虫功能 网页源码 使用http.get()方法获取网页源码,以hao123网站的头条页面为例 http://tuijian.hao123.com/hotrank var http = require('http'); http.get('http://tuijian.hao123.com/hotrank',function(res){ var data = ''; res.on('data',function(chunk){ data += chunk;

随机推荐